▼
Streaming live at 10am (PST)

Collection List Hover & Image Appears

Design help Animations & Interactions
#1

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
Collection List Hover & Image Appear 2
#2

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:

#3

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
#4

No prob man! Happy to help :webflow_heart:

1 Like
#5

@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!