How to mouseover zoom/scale?

[Macker]

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.

[zbrah]

Hi @Macker,

Ok so first remove your background image from slider.

Then drag in an image component inside slide

Do this on image

Add a transition transform

Go to hover state and add extra scale on transform

Add an overflow hiden on slide

And there you have it

[Macker]

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?

[zbrah]

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

[Macker]

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?

[zbrah]

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

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.

[zbrah]

@Macker

I’ve done it for you quickly

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

[Macker]

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

[system]

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