Skip to content
Related Articles
Open in App
Not now

Related Articles

Bulma Overlay

Improve Article
Save Article
  • Last Updated : 20 Feb, 2022
Improve Article
Save Article

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!