The end result of Eric Meyer’s tutorial on creating this row of slanted images is pretty classy. But it’s more about the journey than the destination (there isn’t even really an isolated demo for it). Eric does an amazing job at talking it through like a thought process.
We did that recently, only ours was sort of fake/generic where Eric’s was for a real-world design.
- This is a row of boxes, so
flexbox. Eric pondered ifgridwould have been as good or better of a choice since the widths are known and either can be made to accept more/less boxes without adjustment. I agree it’s a tough call here. - Since the image dimensions being manipulated,
object-fitis a must, and the less-usedobject-positionis used here to help with a focal point. - The captions are just pushed to the bottom of the boxes naturally by the images.
- The slanting is done with
clip-path, but it involves some trickery. The boxes need to be enlarged to clip without leaving blank space, then pulled together with negative margin. Percentages are used all around to keep things flexy. - Still more tweaks are needed to keep from clipping the captions, and then there is still opportunity for more clever design bits.
Sad that this is probably the last time I’ll link to 24 ways.
Couldn’t you have used the transform slant for this? I think that would have been better optimized and better supported. But amazing job though!
Maybe? But a
transform: skew()will transform the entire element, with the image inside, which would make the image look very funky. I’d think you’d have to un-skew the image inside then to fix that, making this perhaps even more complex.