Amazon's product hover treatments

Anyone know how to create this effect Amazon uses to show off their products?

Any help or direction would be highly appreciated! Thank you in advance…

Cheers

Here is my public share link: LINK
(how to access public share link)

Can you please share a link to the webpage? The image is very poor quality … thanks! :sunglasses:

Yeah my animated gif apparently didn’t work. Here is the link to the Amazon page:

When you hover over the image it brings up a much larger detailed image to the right.

This demonstrates the effect I’m looking to create much better.

I am not sure how you would be able to have this effect be done in Webflow natively, but a work around might be to just scale the image to a much larger size when hovered over, but I dont see another way of doing this in Webflow.

Hopefully someone else knows a way to do this though. :wink:

That’s what i was thinking as well. I’m gonna try a flexbox layout using two divs and somehow when the image scales up to pop up in the opposite div just as they did here. Kinda like a split screen with the image on the left, then when hovered upon the image scales up within the opposite div.
thanks for your help @VladimirVitaliyevich

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.