Blaze UI Overlays Variations

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:

Output: 

👁 Image

• After adding the overlay effect:

Output: 

👁 Image

Example 2: In the below example, we will see the use of .c-overlay--visible class.

• Before using .c-overlay--visible variation.

Output:

👁 Image

• After using .c-overlay--visible variation.

Output:

👁 Image

 Reference: https://www.blazeui.com/components/overlays/