Masonry post overlay transparency

[JAAK]

Hi

On the demo, the masonry thumbnail overlay has a transparency (The 2 tone blue on hover). Do you have custom css to achieve this?
I added:
figure.animated-overlay > a {
opacity: 0.4;
}
no luck?

[Tahir – SUPPORT]

Hi,
I am not sure what you mean to ask ?. Do you want to change the hover style ? . Like change offset etc ?

Thanks
Tahir

[JAAK]

Hi

Please see image attached. The light blue and dark blue rollover is slightly transparent on your demo. When I rollover the image for the blog post, I want to be able to see the image in the background. To do that I need to make the rollover slightly transparent.

Cheers!

[Kyle – SUPPORT]

Hi

Any chance you could provide us with a link so that I can see why it is not already transparrent.

If you can’t provide me with a link, try:

figure.animated-overlay figcaption {
  background-color: rgba(29, 198, 223, 0.9);
}

Add change the rgba values.

– Kyle

[denorm]

I had this problem as well. For some reason the transparency wasn’t working on my site. I put the following into my child css:

/* Fix rollover transparency */
figure.animated-overlay:hover figcaption {
  opacity: 0.9;
  background-color: rgba(228, 228, 228, 0.9);
}

Of course you can change 0.9 to any value you like to adjust the amount of transparency.

[denorm]

I should note I think there’s a bug somewhere in the template. Only putting “figure.animated-overlay figcaption” will not work because that value is being overwritten by the theme color customizations..

[fotogarcia]

Just fyi, there is a built in function in most recent version of theme.
Go To Theme Options > General Options > Hover Overlay Opacity to change the transparency of thumbnail overlays.

[Kyle – SUPPORT]

Thanks for sharing this @fotogarcia

– Kyle