How to Create: Overlay Effect

Learn how to create an overlay effect using CSS (a type of overlay effect).

How to Create an Overlay Effect

Step 1 - Add HTML:

Use any element and place it at any position in the document:

<div id="overlay"></div>

Step 2 - Add CSS:

Set the style of the overlay element:

#overlay {
  position: fixed; /* Located at the top of the page content */
  display: none; /* Default hidden */
  width: 100%; /* Full width (covers the entire page) */
  height: 100%; /* Full height (covers the entire page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with transparency */
  z-index: 2; /* If you use a different order for other elements, specify the stacking order */
  cursor: pointer; /* Add mouse pointer on hover */
}

Step 3 - Add JavaScript:

Use JavaScript to open and close the overlay effect:

function on() {
  document.getElementById("overlay").style.display = "block";
}
function off() {
  document.getElementById("overlay").style.display = "none";
}

Try it yourself

Overlay with Text Effect

Add any content you want to the overlay and position it where you want. In this example, we added text to the center of the page:

Example

<style>
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay">
  <div id="text">Overlay Text</div>
</div>

Try it yourself