Streaming live at 10am (PST)

How to create zoom rollover effect


#1

Hello

I am pretty new here and already made a few sites using Webflow for the company I work for, wonderful tool!

I am looking to do this kind of rollover effect as on this site:
http://www.marmotta-alpinhotel.com/

Is this possible in Webflow?

I tried using a hover transition by putting the image in the background of a div-block and then upscale the image in the divblock but it wouldn't allow a smooth zoom effect.


#2

Wich? the ones on find out more and view buttons? or the one on the big boxes with image zoom?


#3

The big boxes with image zoom; The image zoom is what I want to be able to do


#4

You need to proceed with interactions. A hover with transition wouldn't be enough because the bg-scale is the only thing you can transitionned from/to. (opacity works, moving works, not scaling.)

So inside you big block, that have to be set to overflow:hidden, you need to set a div with an image inside. Then on hover interction, you need to target this div element, check the "limit to childs" checkbox, and make it scale. (and scale down on hover out).


#5

Will try soon; thank you!

So basically a div with an image inside right; not as background and then just set overflow to invisible


#6

You could set the image as a background of the div (set dimensions to the div) as it's the div you're going to scale up/down.


#7

Figured it out! Thank you Still some issues with rounded edges but will work it out


#8