Change photo A to photo B in collection item on hover

[themanro (Roman Rusinov)]

Basically its a staff page and I want to change photos on hover. Each persona is a collection item.
I can’t wrap my head around how to do it. I’ve read in another topic about trick where you can overlap 2 images and trigger them via interaction. Basically hide photo on top when i hover over an item.
Sounds good in theory but when I do that, each item triggers all other items.
See here: http://downtowncredo.webflow.io/staff

Anyone have an idea how to pull this off?

Cheers!

---

Here is my public share link: LINK
(how to access public share link)

[nwdsha (Naweed)]

Hey @themanro,

The trick is correct but each collection item class name must be different. For example; photo1, photo2 etc.

Best,
Naweed

[themanro (Roman Rusinov)]

Ah-ha thats the problem. Every time I give a collection item a class. It disappears after i click away and come back to it.

[nwdsha (Naweed)]

@themanro,

Don’t set a new class name for each collection item, that’s my mistake.

Follow this easy step;

1. Place a div block in absolute mode to cover the original image.
2. Create a new interaction for this new div block, set initial appearance as 0% opacity, go to triggers > hover > hover over, 100% opacity > hover out, 0% opacity.

Hope this helps.

Best,
Naweed

[themanro (Roman Rusinov)]

Got it, I think I can leave with it for now. Thanks brother!