Blaze UI Basic Overlay

Last Updated : 06 May, 2022

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will be seeing Blaze UI Basic Overlay. The overlay component is used in many other components, like modal, to blackout the content of the page. To make use of overlays the c-overlay class is used. By default, the overlays are hidden. To make overlays visible, we can use c-overlay–visible class.

Blaze UI Basic Overlay Classes:

c-overlay: This class is used to create the overlay.
c-overlay–visible: This class is used with the c-overlay class to make the overlay visible.

Syntax:

<div class="c-overlay c-overlay--visible" 
    aria-hidden="true">
</div>

Example 1: This example shows the use of the c-overlay class to create an overlay. There will be no visual change as the overlay is hidden by default.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Blaze UI - Basic Overlay</title> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <style> 
        body { 
            font-family: sans-serif; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
      
    <h3>Basic Overlay - Blaze UI</h3> 
  
    <div class="u-window-box-super"> 
        <h2>What is GeeksforGeeks?</h2> 
  
        <p> 
            GeeksforGeeks is a computer science portal  
            for geeks around the globe.One can study  
            about different topics of Computer Science  
            domain and can share his/her knowledge with  
            the community to help everyone learn better. 
        </p> 
    </div> 
  
    <div class="c-overlay" aria-hidden="true"></div> 
</body> 
  
</html>

Output:

Example 2: This example shows the use of c-overlay–visible to make the overlay visible. You can see a greyish overlay over the content in the output image.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Blaze UI - Basic Overlay</title> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css"> 
  
    <style> 
        body { 
            font-family: sans-serif; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
  
    <h3>Basic Overlay - Blaze UI</h3> 
  
    <div class="u-window-box-super"> 
        <h2>What is GeeksforGeeks?</h2> 
  
        <p> 
            GeeksforGeeks is a computer science portal  
            for geeks around the globe. One can study  
            about different topics of Computer Science  
            domain and can share his/her knowledge with  
            the community to help everyone learn better. 
        </p> 
    </div> 
  
    <div class="c-overlay c-overlay--visible" 
        aria-hidden="true"> 
    </div> 
</body> 
  
</html>