▼
Streaming live at 10am (PST)

How to mouseover zoom/scale?

Design help General
#1

Hey guys/girls,

I’ve got a website set up where I’d like to (on desktop) have the projects/gallery images zoom/scale when you mouseover/hover. The issue I’ve had when I’ve tried to get it to work is that whilst the images do what you’d expect, they appear to “jump out” of the grid that they’re in, whereas I’d like them to remain within.

If you go to the read-only link: https://preview.webflow.com/preview/roberts-limbrick?preview=17cf1ed66cc0eb6e9c6cc667f77ae01f

What I did previously was add a 1.0 to 1.1 scale transform with a 300ms transition to the “Link Block” within the collection list. This was the right effect, but if you try it yourself you’ll see what I mean about it not staying within the bounding boxes.

Forgive me if this doesn’t make a huge amount of sense.

#2

Hi @Macker,

Ok so first remove your background image from slider.

1
1.gif264×1234 100 KB

Then drag in an image component inside slide

2
2.gif1849×1213 1.1 MB

Do this on image

44
Capture d’écran 2018-01-04 à 12.11.44.png246×994 26.4 KB

Add a transition transform

24
Capture d’écran 2018-01-04 à 12.12.24.png245×926 18.2 KB

Go to hover state and add extra scale on transform

08
Capture d’écran 2018-01-04 à 12.15.08.png239×970 25.1 KB

Add an overflow hiden on slide

12
Capture d’écran 2018-01-04 à 12.14.12.png242×824 18.3 KB

And there you have it

1
1.gif1882×818 1.67 MB

3 Likes
#3

That’s very helpful indeed, but my apologies if I wasn’t clear in my first post. I meant the collection list on the “tags” or “sectors” page that shows up when you click the “projects” link on the main page.

Will this technique also work on this too?

#4

Ahah no problem @Macker

Webflow team have done the greatest tutorial for your problem

You should consider structuring your layout with columns so everybody stay in his room

Like so

16
Capture d’écran 2018-01-04 à 12.37.16.png1848×298 14.9 KB

#5

Oh I thought the whole CMS/collection list was specifically for doing this kind of thing? If I re-make it using flex/columns will it still automatically populate it with stuff from the CMS and scale (as per mine) for tablet/phone?

#6

No you are right, since you are in a cms page you should use the cms column then.
I wrote that because it was broken when i opened your project, but i guess you are working on it in the same time :smiley:

53

In my opinion you don’t need flexbox for this one.
You should use flebox for big problems / things you can’t do with columns and very specific things.
With that kind of layout i would recommend columns.

#7

@Macker

I’ve done it for you quickly

http://imagecms.webflow.io/
https://preview.webflow.com/preview/imagecms?preview=a295aec1d693e492f22fb0e581b74d78

#8

Looks good, that’s the effect I’m after. The problem I’m having with setting it back to “inline” rather than flexbox is that I can’t seem to change the number of columns depending on the device you’re viewing it on AND the images don’t seem to want to fill the full height of the box?

help1|690x420

#9

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