As you can see, each image is contained in a square box and resizes to fill. There’s also a nice ‘scale-up’ transition on hover.
No matter what I try with the Grid stack I cannot get this to work in UIKit. I’ve tried using cards in each ‘width’ area but you can’t specify a fixed height. I’ve managed to get the scale up thing working with an ‘overlay’ stack, but again, you have to use an ‘image’ stack and they can’t have fixed proportions. I need this to work regardless of the proportions of the image I drop into it, so even though they may be landscape of portrait, they fill up the square box.
I’m guessing I’ll need to use a ‘background’ stack but then I can’t specify square or I can’t get the scale transition to work…
Any ideas how this could be achieved? It’s driving me nuts. Is it even possible?
I tried UIKit3 image stack but it doesn’t work, the image get’s squished to fit the box and preserve height or width just makes the box shrink.
Your Image Fit kind of works in that it does fill the fixed size properly, the only problem is that it doesn’t allow for warehoused images (i.e. set via a url to a resource), so by just dropping an image in to the box you get a generated name for the image file instead of the actual image name, so no good for SEO.
Also, I’ve noticed that your stack seems to ignore what I’ve typed into the ‘alt’ field and just added its own text. (See grab)
I’ve managed to get it working using @habitualshaker Stuart’s ‘SRCERER’ stack. Does exactly what I need. It even does a nice little zoom scale on hover :-)
I’d still be interested in a way to do it natively in UIKit though.
Here you go: for each image use a Background inside a Utility stack. Set all Backgrounds to the same height using the height setting, medium should be fine. In the Utility stack use the class uk-transition-toggle, in the Background stack use uk-transition-scale-up uk-transition-opaque.
If you need links to the images put all into a Card stack, regulate the custom padding and enable link.
Just drop a background and set the height to auto. In its custom class (advanced enabled) add the classes uk-inline-clip uk-transition-toggle.
Then drop an UIkit3 image stack into it and set its dimensions to, for example, 250px (width and height) and add the following classes in its advanced area : uk-transition-scale-up uk-transition-opaquealternatively, use the site image fit stack and set its dimensions to the same, set the resize behavior to cover, and add the same classes (uk-transition-scale-up uk-transition-opaque) to the CSS classes . Image Fit will create a perfectly square image even it’s not a square to begin with.
The advantage of this method (with either image stack) over the one with the utility stack described above, is that when you hover over the image, only the contents scale up, the image boundaries do not grow. Just test it out and see the difference.
Thanks @Ricardo. I couldn’t get this working as I wanted because I needed a warehoused image so had to use the UIKit image stack, which, even if you set the dimensions, resizes to the proportions of the image used.
It would work with ‘image fit’ but not for me just yet.
Yep there’re many ways to skin a cat (what awful expression, poor cats…) using both all-UIkit components or 3rd party stacks. The uk-transition-toggle will be added to the class options of Utility for the next update, so to facilitate things a bit.
I also fixed a small bug in the Utility stack where there’s no default for the option class list, so the uk-panel seem not to be applied unless you select some other option and back to panel again.
I pushed out a major update of the Image Fit Stack! It’s still very lean, but mean! Here are some details
Image Fit can accept 4 types of images: drag & drop images, including the new Stacks 4.x site images as well as image well and warehoused images.
Images can be resized to exact dimensions, aligned left, center or right. The responsive behavior of the images can be set in order to best fit into to those chosen dimension: Fill, Cover, Contain and Scale down.
Additionally images can be rotated, scaled, skewed, moved and animated without any Javascript.
They can be set as clickable links and the z-index can also be set.
Hi @Ricardo. The stack is working great! The alt tag is correct now too. The only tiny thing I’d say is that if the scaling transform is active, then you get a nice smooth transform on mouse-over but a jarring pop back to default on mouse-out.
Would it be possible to ease back too?
