Overlays
Use our utilities to quickly style almost any element. Great for text, images, buttons, or any other element.
Overlay Basics
Original
no overlay
<!--
Opacity Classes
.overlay-opacity-[0|25|50|75|100]
-->
<div class="overlay-dark overlay-opacity-25 bg-cover ratio ratio-1x1" style="background-image:url(../demo.files/images/unsplash/600x600/amy-shamblen-85Y8Y4zQ-p8-unsplash.jpg)"></div>
<div class="overlay-dark overlay-opacity-50 bg-cover ratio ratio-1x1" style="background-image:url(../demo.files/images/unsplash/600x600/amy-shamblen-85Y8Y4zQ-p8-unsplash.jpg)"></div>
<div class="overlay-dark overlay-opacity-75 bg-cover ratio ratio-1x1" style="background-image:url(../demo.files/images/unsplash/600x600/amy-shamblen-85Y8Y4zQ-p8-unsplash.jpg)"></div>
Overlay hover
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
<div class="overflow-hidden rounded ratio ratio-1x1 overlay-dark overlay-opacity-25 overlay-opacity-75-hover bg-cover" style="background-image:url(../demo.files/images/unsplash/600x600/amy-shamblen-85Y8Y4zQ-p8-unsplash.jpg)">
<div class="d-flex flex-column align-items-center justify-content-center position-absolute text-white">
<h4>Lorem Ipsum</h4>
</div>
</div>
<div class="overflow-hidden rounded ratio ratio-1x1 overlay-dark overlay-opacity-25 overlay-opacity-75-hover transition-zoom-content-hover">
<span class="z-index-0 position-absolute-full transition-zoom-item bg-cover" style="background-image:url(../demo.files/images/unsplash/600x600/amy-shamblen-85Y8Y4zQ-p8-unsplash.jpg)"></span>
<div class="d-flex flex-column align-items-center justify-content-center position-absolute text-white">
<h4>Lorem Ipsum</h4>
</div>
</div>
<div class="overflow-hidden rounded ratio ratio-1x1 overlay-dark overlay-opacity-25 overlay-opacity-75-hover transition-zoom-content-hover transition-reveal-hover">
<span class="z-index-0 position-absolute-full transition-zoom-item bg-cover" style="background-image:url(../demo.files/images/unsplash/600x600/amy-shamblen-85Y8Y4zQ-p8-unsplash.jpg)"></span>
<div class="d-flex flex-column align-items-center justify-content-center position-absolute transition-reveal-item text-white">
<h4>Lorem Ipsum</h4>
</div>
</div>
Overlay Color
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
<!--
Opacity Classes
.overlay-opacity-[0|25|50|75|100]
-->
<div class="overlay-primary overlay-opacity-25"> ... </div>
<div class="overlay-secondary overlay-opacity-25"> ... </div>
<div class="overlay-success overlay-opacity-25"> ... </div>
<div class="overlay-danger overlay-opacity-25"> ... </div>
<div class="overlay-warning overlay-opacity-25"> ... </div>
<div class="overlay-info overlay-opacity-25"> ... </div>
<div class="overlay-light overlay-opacity-25"> ... </div>
<div class="overlay-dark overlay-opacity-25"> ... </div>
Overlay Section Example
Autumn is here
winter is also beautiful
<section class="d-flex flex-column align-items-center justify-content-center text-white overlay-dark overlay-opacity-50 bg-cover" style="background-image:url(../demo.files/images/unsplash/idin-ebrahimi-JXPP3xFbb-k-unsplash.jpg)">
<h1 class="display-4">Autumn is here</h1>
<p class="lead">winter is also beautiful</p>
<div class="mt-5">
<a href="overview.html" class="btn btn-warning shadow-xl-primary">
<span>Overview</span>
<svg xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</a>
</div>
</section>