Skip to main content

Overlay

Square only

Adds a semi-transparent overlay over an element.

Basic examples

How can we help?

<div class="bg-image bg-cover overlay overlay-primary overlay-50" style="background-image: url(../assets/images/photos/photo-21.jpg);"></div>

Colors

Use different overlay colors by adding overlay-[theme color] class to the element.

How can we help?

<div class="bg-image bg-cover overlay overlay-secondary overlay-50" style="background-image: url(../assets/images/photos/photo-21.jpg);"></div>

Position

If you need the overlay only from the top or the bottom, please add overlay-[theme color]-gradient-top-[0-100 in 10 steps] or overlay-[theme color]-gradient-bottom-[0-100 in 10 steps] classes.

How can we help?

<div class="bg-image bg-cover overlay overlay-primary-gradient-bottom-90 overlay-90" style="background-image: url(../assets/images/photos/photo-21.jpg);"></div>

Jump to