Fit, Opacity and Links

Object Fit, Opacity and Link Utilities

.object-fit-cover, -contain, -fill, -scale (for scale-down) and -none, new in 5.3.0 and responsive, decide how an <img> or <video> fills a box of another shape: a fixed-size avatar with .object-fit-cover is cropped, not squashed. .opacity-0 to .opacity-100 (in steps of 25) fade an element with its children.

The 5.3.0 link utilities style the underline apart from the text: .link-offset-1 to -3 move it down, .link-underline-primary colors it, .link-underline-opacity-0 to -100 fade it, and .link-opacity-50 fades the text. Offset and opacity classes have -hover variants, so link-underline-opacity-0 link-underline-opacity-100-hover shows the underline only on hover. Other Helpers's demo uses several.