Streaming live at 10am (PST)

Change photo A to photo B in collection item on hover


#1

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)


#2

Hey @themanro,

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

Best,
Naweed


#3

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.


#4

@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


#5

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


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.