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.
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.
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.
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?
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.
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?