Streaming live at 10am (PST)

Zoom hover effect


#1

So here is the link to my site https://preview.webflow.com/preview/sandis-first-project?preview=035250f9c8c08dba22e79e377211ce0d I’m trying to create zoom in image inside not outside the container from these examples https://www.bytomas.com/ . I’ve posted a topic like this before, and couldn’t work it out still.

I’ve created columns, an image and a div over the top, selecting the parent as overhidden however the animation still doesn’t work. I’d appreciate anyone who can let me know how to do this, can someone help me understand what I’m doing wrong.


#2

Hi @Sandi_Belle_Bennett

A couple of issues I can spot - there is a legacy interaction as well as a new (IX2) interaction on the ‘div block 6’ so you could toggle the legacy switch to switch the old one off.

The other is that div block 6 seems to have both the gradient and the image as background. From the example you are hoping to achieve, you just want the image to move and not the gradient?

In that case - you would need div block 6 and a new div block inside for the image - that way you can target just the image to zoom on hover…not it’s container…

Does that make sense?

Edit: Or even better - just strip it back and try @philippe great implementation below :arrow_down: :+1:


#3

Here’s a quick way to achieve this effect:

Demo:
http://hover-zoom.webflow.io/

Clone Link:


#4

Hi @philippe and Mr @StuM - have you noticed that the image blurs during the transition? There’s no blurring on the www.bytomas.com site. I always have this problem… I wonder if there is a way to stop images blurring on zoom? Best of earthly regards Kai :slight_smile:


#5

I think since Tomás’ site is made also with webflow he is the one to know how he did it :smiley:


#6

thanks @dram! does it blur for you too? just interested to know if its my machine or my eyes only! :thinking:


#7

It totally blurs during transform scale.


#8

Can’t say i’ve noticed it myself - those two links above seem to perform the same for me…

What are you viewing them on Kai?


#9

Here is how it looks slowed down (in chrome, dunno about safari). It is blurred until snapped into its end position.


#10

Saw two thread on StackOverflow about this issue:


#11

hi @StuM - soz for not responding sooner! I’m viewing them on my computer! HA!! :laughing: Chrome on PC… :grin:


#12

hi @dram - yes, that’s what I see too… thanks for confirming! :slight_smile:


#13

thanks @philippe!!! :slight_smile: very interesting… backface hidden, etc… nice one… :sunglasses:


#14

Hi @phillippe, i’ve been trying to do this zoom effect in webflow by copying your settings.
But when i rollover the image the whole image scales larger without the mask around it.

Is there something i did wrong?