Open In App

Bulma Overlay

Improve
Improve
Like Article
Like
Save
Share
Report

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:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel='stylesheet' 
          href=
</head>
  
<body>
  
    <div class="card">
        <div class="card-image">
            <figure>
                <img alt="GFG image" 
                     width="500" 
                     height="600" 
                     src=
            </figure>
        </div>
        <div class="card-content is-overlay">
            <h3 class="tag">
                GeeksforGeeks Overlay content1
            </h3>
            <h3 class="tag">
                GeeksforGeeks Overlay content2
            </h3>
        </div>
    </div>
</body>
  
</html>


Output:

Bulma Overlay

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel='stylesheet' 
          href=
</head>
  
<body>
    <div class="card">
        <div class="card-image">
            <figure>
                <img alt="GFG image" 
                     width="500" 
                     height="600" 
                     src=
            </figure>
        </div>
        <div class="card-content is-overlay">
            <h3 class="has-text-white">
                GeeksforGeeks Overlay content1
            </h3>
            <h3 class="tag">GeeksforGeeks Overlay content2</h3>
            <br><br>
            <button class="button is-primary">
                This is button1
            </button>
            <button class="button is-primary">
                This is button2
            </button>
        </div>
    </div>
</body>
  
</html>


Output:

Bulma Overlay

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



Last Updated : 20 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads