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

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

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

7

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

8

hi @Joao_MartinoImage is hidden in link it self,

CleanShot 2021-04-07 at 18.32.41
CleanShot 2021-04-07 at 18.32.411356×244 40 KB

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

9

Thank you so much!! :smiley:

1 Like