Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it.
In this article, We are going to learn about Overlays variation. 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.
Variations:
- .c-overlay–visible: This modifier is used for overlays that are by default hidden.
- .c-overlay–dismissible: This modifier is used to give the sense that you can click on an overlay to make it disappear.
- .c-overlay–transparent: This modifier is used for overlays that don’t necessarily need to be visible, they can appear transparent to provide functionality but no visual cues.
- .c-overlay–fullpage: This modifier is used to make overlays cover the entire page.
Syntax:
<div class="c-overlay c-overlay--visible"></div>
Example 1: In the below examples, you are going to see the effect of overlays.
- Before adding overlay effect:
<!DOCTYPE html> <html lang="en">
<head>
<title> Blaze UI Overlay Variation </title>
<link rel="stylesheet" href=
</head>
<body>
<div class="u-centered">
<h1 style="color: green;"> GeeksforGeeks </h1>
<h3> Blaze UI Overlay Variation </h3>
<div class="c-card">
<header class="c-card__header">
<h2 class="c-heading">
GeeksforGeeks Overlay Variation
</h2>
</header>
<div class="c-card__body">
A Computer Science portal for geeks.
</div>
</div>
</div>
</body>
</html>
|
Output:
- After adding the overlay effect:
<!DOCTYPE html> <html lang="en">
<head>
<title> Blaze UI Overlay Variation </title>
<link rel="stylesheet" href=
</head>
<body>
<div class="u-centered">
<h1 style="color: green;"> GeeksforGeeks </h1>
<h3> Blaze UI Overlay Variation </h3>
<div aria-hidden class="c-overlay c-overlay--visible">
<div class="c-card">
<header class="c-card__header">
<h2 class="c-heading">
GeeksforGeeks Overlay Variation
</h2>
</header>
<div class="c-card__body">
A Computer Science portal for geeks.
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: In the below example, we will see the use of .c-overlay–visible class.
- Before using .c-overlay–visible variation.
<!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=
<style>
body {
font-family: sans-serif;
text-align: center;
color: grey;
}
</style>
</head>
<body style="background-color:black" ; color="green">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Overlay - Blaze UI</h3>
<div>
<h2>What is GeeksforGeeks used for?</h2>
<p>
We provide a variety of services for you
to learn, thrive and also have fun! Free
Tutorials, Millions of Articles, Live,
Online and Classroom Courses ,Frequent
Coding Competitions ,Webinars by Industry
Experts, Internship opportunities and
Job Opportunities. Knowledge is power!
</p>
</div>
<div>
<img src=
alt="Girl in a jacket" width="300" height="200">
</div>
</body>
</html>
|
Output:
Blaze UI | Overlays
- After using .c-overlay–visible variation.
<!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=
<style>
body {
font-family: sans-serif;
text-align: center;
color: grey;
}
</style>
</head>
<body style="background-color:black" ; color="green">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Overlay - Blaze UI</h3>
<div>
<h2>What is GeeksforGeeks used for?</h2>
<p>
We provide a variety of services for you
to learn, thrive and also have fun! Free
Tutorials, Millions of Articles, Live,
Online and Classroom Courses, Frequent
Coding Competitions, Webinars by Industry
Experts, Internship opportunities and
Job Opportunities. Knowledge is power!
</p>
</div>
<div class="c-overlay c-overlay--visible" aria-hidden="true">
<img src=
alt="Girl in a jacket" width="300" height="200">
</div>
</body>
</html>
|
Output:
Blaze UI | Overlays
Reference: https://www.blazeui.com/components/overlays/