Images

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.

Recipe

Palazzo Punch

HTML

<div class="fizz-image-overlay" style="--aspect-ratio: 650/250">
  <img src="https://assets.codepen.io/281/image+166.png" alt="" />
  <div class="fizz-inset-square-16">
    <p class="fizz-text-small">Recipe</p>
    <p class="fizz-heading-3">Palazzo Punch</p>
  </div>
</div>