Image Block hover Overlay CSS

Hi,

I am trying to add a simple overlay on certain image blocks (that have text on top) in Fluid Engine. I would like the overlay to be a simple color or gradient effect on hover. 

Similar to the image hover effects seen here: https://www.ulaval.ca/en

anyone know of any code to achieve this?

Thank you 🙂 !!

1 hour ago, AndrewDurand said:

Hi,

I am trying to add a simple overlay on certain image blocks (that have text on top) in Fluid Engine. I would like the overlay to be a simple color or gradient effect on hover. 

Similar to the image hover effects seen here: https://www.ulaval.ca/en

anyone know of any code to achieve this?

Thank you 🙂 !!

Can you share your site with the protected password so I can take a look?

Hi bangank,

The URL: https://oriole-panda-2fhm.squarespace.com/

PW: dialogue

I am trying to get a hover overlay on the image blocks in the "our partners" section. and an overlay on the images in the background. 

Thanks!

On 7/29/2022 at 12:59 AM, AndrewDurand said:

Hi bangank,

The URL: https://oriole-panda-2fhm.squarespace.com/

PW: dialogue

I am trying to get a hover overlay on the image blocks in the "our partners" section. and an overlay on the images in the background. 

Thanks!

Add to Design > Custom CSS

/* Our Partners Image Overlay */
.fe-62deaf4c2e56eb135c4488ed .content-fill:after {
    content: "";
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s;
}
.fe-62deaf4c2e56eb135c4488ed .image-block:hover .content-fill:after {
    opacity: 1;
    transition: all 0.3s;
}

Thank you!

This worked well 🙂

So you are targeting certain elements with this>> (where did this come from, its not the section ID?)

.fe-62deaf4c2e56eb135c4488ed

Then told it to fill content with opacity 0?

.content-fill:after 

and then change the opacity of the "fill" when you hover over image blocks?

.fe-62deaf4c2e56eb135c4488ed .image-block:hover .content-fill:after

Just trying to understand!

Thank you for your help.

Amazing, you guys are awesome 🙂

Cheers.

Hi,

Thank you for this code I've been looking everywhere for one that works with fluid engine! Is there a way to also add text when you hover over the image? I'm also trying to add a subtle zoom in on my images when hovering as well if possible.

Thank you!

On 8/8/2022 at 2:36 AM, Ricebunny42 said:

Hi,

Thank you for this code I've been looking everywhere for one that works with fluid engine! Is there a way to also add text when you hover over the image? I'm also trying to add a subtle zoom in on my images when hovering as well if possible.

Thank you!

If you use Fluid Engine, each case will need a different code. If you use Classic Editor Image Block, this will achieve easier.

You can add Image, text over image, then share link to page on your site, we can check & give the code