Images behaving strange on hover

Hi people,

I’ve been building a website for a client and am nearing the finish line, but i bumped in to some problems. I have a “gallery section” on the landing page which is supposed to enlarge the images on hover.

I’ve set the image to take up 40vw of space in the grid.

However, when I hover over the image it expands to 100vw before scaling down to 40vw. I can not figure out why. Any ideas?


Here is my site Read-Only: Webflow - ect

Hi Hugo,

Mind sharing your project?

My mistake, of course: https://ect-2a9554.webflow.io/

https://preview.webflow.com/preview/ect-2a9554?utm_medium=preview_link&utm_source=designer&utm_content=ect-2a9554&preview=db10b1db1a9c2ce46f3291be52c24fa2&workflow=preview

Here is the correct one, thanks!

So the problem is that you can’t use auto as a starting state, it needs to be a unit as far as I know.

So you could go from 10vw to 20vw or for example or from 10vw to auto, but not auto to 30vw.

ahh, i see! That totally helped. Thanks a million!

Now on to the next problem. This works great on the left most images, since they expand to the right. But how can i get the right most images to expand to the left instead?