Hover swapContent with multiple preview images

Hi all,

I am building a new portfolio site and want to be able to swap the project preview image on my home screen per mouseover project link.

You can see what I mean in this picture. The mouseover link, highlighted blue, corresponds to its ‘featured image’. I want to be able to do this for all of the links in the list to the left.

To clarify: when the link or featured image (in link box) are pressed, you are taken to the project page. I am talking about the images changing any time a new link is hovered.

Any help is greatly appreciated!

38%20AM


Here is my link:

https://preview.webflow.com/preview/josephs-first-project-a4ae3e?utm_source=josephs-first-project-a4ae3e&preview=0a6e82f44c8efefbcc079b4df5f85b04&mode=preview

You can either achieve that by using webflow interactions ( which is pretty straight-forward if you know how to use it ) or JavaScript (which might help you to speed things when designing everything).

Thank you Jean, glad to know it should be feasible within webflow alone. Structure wise–would you recommend creating a unique link>image box for each corresponding list>link element?

And then use each list>link as the hover trigger element affecting each link>image?

What I would recommend you to do is place the images elements inside their respective link/divs and create only one interaction that affects only the children of the interaction trigger (which will be the link block). That way you only need to create only one animation. After that, you just need to make the images position: absolute and make them relative to something other than the link block

So the trigger should be the link box? Not the text links? I would like hovering on the text links to trigger the image change in the link box/the link box. Hovering on the image/link box shouldn’t trigger anything. Just want to make sure I am understanding properly.

But yes it should be one animation applied across the class of list nav links.

1 Like

Give me a few minutes and I’ll build a quick example to you.

That would be great, thank you so much.

Here it is: https://preview.webflow.com/preview/jean-augustos-sublime-project?utm_source=jean-augustos-sublime-project&preview=f815bf95c4a9267ab758c446b9fe1bb6&mode=preview

Just navigate to the correct page ( you’ll see) and pay attention to how things are structured and how the animation works. Javascript is a bit more precise, but this should do the trick. I hope it helps.

Here’s the live version

Yea that’s exactly what I meant! Thanks for giving me that example, I’ll be sure to study up on it and incorporate it into my design.

That’s great to hear. Let me know if you don’t understand how things are styled or how they behave. You can contact me either by sending a PM or here.

Have a great day

1 Like