Adding a hover effect on an image gallery thumbnail

Hi,

I am enjoying the theme, but I wanted to add a very basic hover effect on the image thumbnails of a gallery. Basically it’s just as a UX improvement to give some sort of feedback that they are clickable.

All I would add is just a bluish transparent filter on top of the image during hover. How would I do that? I wasn’t sure of which class to use and neither which attributes.

Thank you.

Hello,

I would be glad to help you, but can you please provide a link to your website and some explanatory screenshots?

Kind Regards, Roman.

Hi roman,

sure. Here’s the website: http://plecoart.com/

For explanatory screenshot I cannot reproduce it, but you can check in here: https://demo.athemes.com/sydney-pro/
In “Our Work” section, you can see how when you hover thumbnails, they are covered in color. I wouldn’t need title like that example.

Hello, thank you for the link.

Try to use the following CSS code to highlight hovered images a little bit.

You can add CSS code in Customize → Additional CSS section.

.elementor-image-gallery img:hover {
    filter: brightness(120%);
    transition-duration: 0.5s;
}

.elementor-image-gallery img {
    transition-duration: 0.5s;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Yeah, that’s like it. Thank you.

The only trouble is that with the filter attribute I cannot really play with colours, since they are pre-defined filters. I have tried using background-color but ir doesn’t work, I guess because we are not pointing any layer on top of the image itself.

Any simple solution for this, or maybe some different attribute than filter? Thanks.

Hello,

I don’t think that there is an easy way to do it without overlay HTML element, unfortunately.

Kind Regards, Roman.