Show image on hover within collection list

Design help General
1

Hi,

I am wondering how to go about creating an effect like in this website. On my ecommerce website I have a grid with all of my products from the collection list. I would like that when you hover over the cover image it shows a secondary image from within the product page.

You can see the effect in this other website. As tou hover over a product image it shows another image of the same product.

Here is my site Read-Only: Webflow - Satori Vintage

2

Hello!

To achieve this animation do this:

  1. First add a secondary image field in your CMS collection (not multi-image)
  2. Add your secondary image to each product in your collection
  3. Go back to your page, add a DIV inside of Collection Item, give it a Relative position
  4. Add 2 image block, one with the main image, the other with the second image
  5. Give the second image block a second class like “–hover-on”, give an absolute position

Then you add a mouse hover animation on your collection:
6) select the secondary image, put the opacity at 0 or hide it
7) on mouse hover put the opacity at 100%
8) Do the opposite on mouse out