Home/Elements/Overlay

Overlay

The .overlay class absolutely positions an element to fully cover its nearest positioned ancestor - the standard building block for image overlays, modals, and loading screens.

Usage

Give the parent a position (.relative works well) and add .overlay to the child. It expands to position: absolute; inset: 0.

Preview

Overlay content
<div class="relative">
  <img src="photo.jpg" alt="">
  <div class="overlay bg-dark opacity-50 flex items-center justify-center">
    <span class="text-white fw-700">View gallery</span>
  </div>
</div>
ClassCSS
.overlayposition: absolute; top: 0; right: 0; bottom: 0; left: 0;
Needs a positioned parent. .overlay only covers the nearest ancestor with position: relative (or absolute/fixed/sticky) - see Position.