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.
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.
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.
