This made in Webflow site Legal Monkeys - Company has the coolest image swap on hover effect (scroll down to “The Monkeys” and hover over the photos). I’m confident I’ve got the swap content on hover thing down like the tutorial example but this is 3 different images. I have photos ready to go but I am not sure how to emulate this. Any ideas on how I can achieve this look would be greatly appreciated.
1 Like
I felt they use ‘divided mouse position technique’
Yep there must be a JS. It adds a “pic1” or “pic2” or “pic3” class to
<div class="people-image kerry-snow"></div>
when you hover the vertical thirds of the object.
Vincent that must be what’s going on. When I opened up developer tools and hovered over each third of the image, I could see that div line change to reflect the new image shown.
Koftkoft do you know of any resources for this technique? I’m not having any luck with a google search on it.
I’m not even a novice in .JS. I wonder if this could be achieved with CSS?
With a bit or patience you can do that in webflow… by putting a 3 rows ROW widget on top of the badge, and making interaction on Hover of each row to change the look of the badge (would actually need 4 badges one on top of each other, and toggle their visibility).
I’ll give it a try. If I am successful I’ll post the steps.