Image Hover Overlay

[pingland222]

Hello,

I am using the latest version of pro. I have a simple image inserted into a column with a link on the image. I would like to have a simple color overlay when someone hovers on the image. Is there simple CSS for that? I have tried several CSS snippets with no luck. Thanks!

[paul.r]

Hi,

To achieve that, add a unique class to your image element.

eg. Add my-image

Then add this in Theme Options > CSS

.my-image {
   background-color:red;
}

.my-image img {
   opacity:0.5;
}

Change red with the color that you like.

Hope that helps.

[pingland222]

Thanks,

So I tried the CSS and it worked. I just needed to add “:hover” to the class so that when you hover over the image it changed color.

So I thought that you could do this in the builder itself without needing to insert CSS. Here is a screen shot of the “setup” section on an image. Is the color pickers not suppose to do the same thing? Thanks!

[jade]

Hi there,

The option is for the background color and will appear below the element so that whatever you set there will not appear as an overlay.