How to hide Essential Grid Featured image on hover with alt image

[wowflak]

Hi,
I have setup an essential grid to show an alt image on hover, however these are transparent png files and the featured image below still shows on hover. How do I hide that image below on hover?

Tried:
.esg-media-poster:hover {
display: none;
}
But that hides both.

Here is site:
https://kidzbop2020.wpengine.com/

towards bottom of page hover over the first kid.

Thanks

[ruenel]

Hello @wowflak,

Thanks for writing in!

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

The image were used as a background image. Therefore your code is incorrect. You should be setting the background image to none instead.

.esg-media-poster:hover {
    background-image: none !important;
}

The !important is needed to force the style to be applied on the element.

Please let us know if this works out for you.

[wowflak]

Awesome, worked! Thanks

[friech]

You’re most welcome,

Cheers!