Flexible Captioned Slanted Images

Programming - Mar 31, 2024

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

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More