Essential Grid / Fade animation question

[Pbalazs89]

Hi there,

I’m building a staging site here: https://tablebudapest.com/home-new/

Question is: near the middle of the page I’m using EG - with the fade animation. I quite like it, but I would like to slightly mold the animation so the cover overlay does not fully disappear, as right now when you hover over the image the text becomes barely readable. How can I achieve this?

Thanks!

[thai]

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

body .esg-entry-cover:hover .esg-overlay {
    opacity: 0.6 !important;
    visibility: visible !important;
}

For more information about the opacity CSS attribute, please take a look at this:

https://www.w3schools.com/css/css_image_transparency.asp

Regards!

[Pbalazs89]

Hi there,

That partially fixed the animation, but now it kind of looks like it’s glitching. Could you have a look?

https://tablebudapest.com/home-new/

Thanks!

[christian]

It looks like a timing mismatch of the effects from the custom code and the animation of the grid. Please try adding this code to alleviate the “glitchiness”.

body .esg-entry-cover .esg-overlay {
	transition: all 0.5s;
}

Hope that helps.

[Pbalazs89]

Thanks a lot! Learned something new today

[rad]

You’re most welcome!