Hover effect over image

Site URL: https://www.verimag-herrliberg.com

Hello! Could someone help me figure out how to do a hover effect over an image? We would like to do something similar to this on our new website: https://www.raquelmarquard.com in the section "Where design and timeless elegance meet". So the idea would be to do some colour overlay and add text to the image with a hover effect. Thank you very much!

PW: verimag2022

Do it for this section?

@tuanphan Hello Tuan, yes, exactly! We tried to solve it with the text inside the picture for now but the hover effect would be very much appreciated.

On 9/6/2022 at 8:43 PM, hello_studiofrey said:

@tuanphan Hello Tuan, yes, exactly! We tried to solve it with the text inside the picture for now but the hover effect would be very much appreciated.

Do you know Classic Editor? You can replicate this section (with 3 images) only with Image Block (Design: Poster), then we can give the code to add hover effect.

@tuanphan Hello Tuan, we just adjusted the section with the Image Block. Could you check if it's possible now for you to provide us with the code? Thank you!

20 hours ago, hello_studiofrey said:

@tuanphan Hello Tuan, we just adjusted the section with the Image Block. Could you check if it's possible now for you to provide us with the code? Thank you!

Can you add image caption first? We can give image overlay code easier

Also, you should use Classic Editor Image Block. Fluid Engine Image will require a lot of code to achieve effect

12 minutes ago, tuanphan said:

Can you add image caption first? We can give image overlay code easier

Also, you should use Classic Editor Image Block. Fluid Engine Image will require a lot of code to achieve effect

https://www.verimag-herrliberg.com/home-page-trial here it should be set up as Classic Editor Image Block(Design:Poster) and there are also descriptions in the pictures

On 9/9/2022 at 4:11 PM, hello_studiofrey said:

https://www.verimag-herrliberg.com/home-page-trial here it should be set up as Classic Editor Image Block(Design:Poster) and there are also descriptions in the pictures

Add to Design > Custom CSS

/* Image overlay */
div#page-section-6319e0af4d721934569d10fd {
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: block;
    opacity: 0;
}
.image-inset:hover:after {
    opacity: 1;
}}

Dear @tuanphan, thank you very much for the code. It works perfectly. Could you please help us one last time to hide the text? The text should only be visible when you go with the mouse over the images. Thank you very much.

On 9/9/2022 at 4:11 PM, hello_studiofrey said:

https://www.verimag-herrliberg.com/home-page-trial here it should be set up as Classic Editor Image Block(Design:Poster) and there are also descriptions in the pictures

Hi,

Can you check url again? It doesn't load now

Hi @tuanphan I'm sorry the url is https://www.verimag-herrliberg.com/ now. PW stays the same

15 hours ago, hello_studiofrey said:

Hi @tuanphan I'm sorry the url is https://www.verimag-herrliberg.com/ now. PW stays the same

Try this new code

/* Image overlay */
div#page-section-6319e0af4d721934569d10fd {
.image-inset:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: block;
    opacity: 0;
}
.image-inset:hover:after {
    opacity: 1;
}
figcaption {
    opacity: 0;
}
figure:hover figcaption {
    opacity: 1;
}}

@tuanphan Thank you so much, it works perfectly now! Have a great day!