Webmasters Gallery

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 which Eric’s was for a real-world design.

• This is a row of boxes, so flexbox. Eric pondered if grid would 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-fit is a must, and the less-used object-position is 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.

Direct Link to Article — Permalink

The post Flexible Captioned Slanted Images appeared first on CSS-Tricks.