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.
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
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
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.
@philippe I been also trying to do your method and it’s not working for me either. I think it’s due to the “Replacing Elements in Animation” option no longer being available