Bulma Overlay

Bulma is a free, open-source CSS framework based on Flexbox to build beautiful responsive websites. In this article, we will discuss the Overlay class in Bulma.

Overlay means to cover one thing with another. It means that we can put one thing on another to make a webpage interactive. Suppose we want to place some text over the image then we can do this using the overlay class.

Bulma Overlay Class:

• is-overlay class: This modifier class is used to put some content on another content. When we want to place something on another thing then this class is very helpful for us.

Syntax:

<div class="card">
 <div class="card-image">
 <!-- Demo image -->
 </div>
 <div class="card-content is-overlay">
 <!-- some content to be placed over the image -->
 </div>
</div>

Example 1:

Output:

👁 Bulma Overlay

Example 2:

Output:

👁 Bulma Overlay

Reference: https://bulma.dev/classes/helpers/is-overlay