Woocommerce archive page, alternative image on hover

[Pbalazs89]

Hi there, I’m trying to build an archive template where if you hover on a specific product, an alternative image will fade in on hover, similar to this:

https://test2.ethermedia.hu/gyuruk/ - Currently, this is achieved with Essential Grid, but it has compatibility / caching issues with either WPML or PRO (some of the products dont since well to english).

So I thought the best course would be to recreate them with pro builder:

https://test2.ethermedia.hu/shop/ - Here’s my attempt, but I don’t know what the best way would be to achieve the alternative image in hover. Can you please give me an idea if this is possible natively?

[christian]

Hey @Pbalazs89,

Use a Div a set its background image. This would be your base image. Give this Div the Width and Height that you need.

Add an Image element to that Div element . Set the Width and Height to 100% to cover the Div and set the Object Fit to Cover.

Next, set the Image Effects to Opacity 0 when an interaction (hover) happens. This will reveal the background of the Div.

[Pbalazs89]

Thanks @christian for that! I’ll give that a go!

[prakash_s]

You are most welcome, @Pbalazs89