Streaming live at 10am (PST)

Collection List Hover & Image Appears

Hey all!

I’m looking for a little help in regards to a collection list interaction. I’m building my agencies new website in the platform and have a particular interaction in mind for the ‘Archive’ page.

A list of projects is shown on the left, with data being pulled from the CMS. What I’d like is when the user hovers over a project, the featured image for that project appears on the right side of the screen, and once they hover off it disappears. We’ve previously created a very similar interaction for a client, which can be viewed here, but I’d like to recreate it in Webflow.

https://kind-studio.webflow.io/archive

Any help would be much appreciated! Thanks,


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

2 Likes

Hey @jameskind

So the problem is showing only the images from each project on hover? I think you need to use only one collection list.

See here > https://www.loom.com/share/65c55f524cef44fb890ced00133f10b8

Something like this

Feel free to reach out if you have some other Qs

Piter :webflow_heart:

Hey @PiterDimitrov

This is absolutely perfect! Exactly what I was looking for.

Thank you for your help and taking the time to make the video.

Cheers,
James

1 Like

No prob man! Happy to help :webflow_heart:

1 Like

@PiterDimitrov Thank you that helped alot, greatly appreciated. Can I ask is there a way to add other interactions within this hover? Every-time I try to add other animations within the same trigger element, it ceases to work!

Hello Piter,
Would you be kind enough to put the link back in?

It’s not working anymore and I’m struggling with this issue.

Thank you

hi @Joao_MartinoImage is hidden in link it self,

this video may will help you out as it is identical approach. trick is the firs in video

Thank you so much!! :smiley:

1 Like