...

Overlay

Skola only

Adds a semi-transparent overlay over an element.

Colors

The following color options are available.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione, adipisci at minima. Doloremque voluptatem iste incidunt ducimus expedita!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione, adipisci at minima. Doloremque voluptatem iste incidunt ducimus expedita!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione, adipisci at minima. Doloremque voluptatem iste incidunt ducimus expedita!

<div class="overlay overlay-black overlay-80"></div>
<div class="overlay overlay-primary overlay-80"></div>
<div class="overlay overlay-white overlay-80"></div>

Opacity

Controls the opacity level of the overlay.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione, adipisci at minima. Doloremque voluptatem iste incidunt ducimus expedita!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione, adipisci at minima. Doloremque voluptatem iste incidunt ducimus expedita!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptatum ullam temporibus similique delectus quo neque cumque, iusto voluptate ducimus ratione, adipisci at minima. Doloremque voluptatem iste incidunt ducimus expedita!

<div class="overlay overlay-black overlay-10"></div>
<div class="overlay overlay-black overlay-20"></div>
<div class="overlay overlay-black overlay-30"></div>
<div class="overlay overlay-black overlay-40"></div>
<div class="overlay overlay-black overlay-50"></div>
<div class="overlay overlay-black overlay-60"></div>
<div class="overlay overlay-black overlay-70"></div>
<div class="overlay overlay-black overlay-80"></div>
<div class="overlay overlay-black overlay-90"></div>
Jump to