Image Overlay

Overlays an image with a content container that has a gradient background for contrast.

The aspect ratio of the image is 16/9 by default, but you can override it as a custom property in an inline style.

Custom Property Default Value Description
--aspect-ratio 16/9 The aspect ratio of the image, expressed as a fraction or decimal.


Palazzo Punch

<div class="fizz-image-overlay" style="--aspect-ratio: 650/250">
<img src="" alt="" />
<div class="fizz-inset-square-16">
<p class="fizz-text-small">Recipe</p>
<p class="fizz-heading-3">Palazzo Punch</p>