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:
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="card"> <div class="card-image"> <figure> <img alt="GFG image" width="500" height="600" src= "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"> </figure> </div> <div class="card-content is-overlay"> <h3 class="tag"> w3wiki Overlay content1 </h3> <h3 class="tag"> w3wiki Overlay content2 </h3> </div> </div> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <div class="card"> <div class="card-image"> <figure> <img alt="GFG image" width="500" height="600" src= "https://media.w3wiki.net/wp-content/cdn-uploads/20190710102234/download3.png"> </figure> </div> <div class="card-content is-overlay"> <h3 class="has-text-white"> w3wiki Overlay content1 </h3> <h3 class="tag">w3wiki 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:
Reference: https://bulma.dev/classes/helpers/is-overlay