How to Create an Overlay Effect using CSS

In this example, we will learn how to create an overlay effect using CSS. Overlay means to cover an element with a coating. It is used to set one thing on top of another. We will be using various CSS properties to create an overlay.

Prerequisites

• CSS position property
• CSS display property
• CSS width property
• CSS height property
• CSS top property
• CSS left property
• CSS right property
• CSS bottom property
• CSS background-color property
• CSS z-index property

Example

HTML

<div class="overlay">Hello World!</div>

CSS

	.overlay {
            position: fixed;
            display: block;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgb(182, 180, 180);
            z-index: 2;
        }

Output

Here, we created a simple overlay with the text “Hello World!”. We declared an overlay div on HTML. We can define the overlay div anywhere in the HTML.

position: fixed set the overlay to sit on the top of the page content.

display: block displays the overlay as a block.

width: 100% and height: 100% makes the overlay cover the whole page.

top: 0, left:0, right:0, bottom:0 makes the overlay fixed at index 0 in all directions.

background-color sets the background color of the overlay.

z-index: 2 sets the overlay to display on top of the stack of elements on a page.

Conclusion

In this example, we learned how to create an overlay effect using CSS. We used various properties of CSS to create an overlay and displayed simple text on the overlay.