CSS - Overlay

An overlay is a transparent layer of content that is placed on top of another element. It can be used to create different effects, such as a modal window, a tooltip, or a popover.

The overlay element should be positioned absolutely and have a higher z-index than the content element. This will ensure that the overlay is displayed on top of the content.

To create an overlay using CSS, follow these steps:

  • Create two div elements one for the overlay itself and one for the content that you want to overlay.

  • Position the overlay element absolutely on top of the page.

  • Set the width and height of the overlay element to 100%, so that it covers the entire page.

  • Set the background-color of the overlay element to a transparent color, such as rgba(0, 0, 0, 0.5). This will make the overlay visible.

  • Set the z-index of the overlay element to a value higher than the z-index of any other elements on the page. This will ensure that the overlay is always displayed on top of all other elements.

CSS Overlay - Basic Example

The following example shows an overlay effect that appears when you click a button and disappears when you click anywhere on the page.

JavaScript can be used to show and hide the overlay div element by using the querySelector() method to get the overlay element. When the button is clicked, a function is executed that toggles the display property of the overlay container between block (visible) and none (hidden).

<html>
<head>
<style>
   .overlay-container {
      position: fixed;
      display: none;
      width: 100%;
      height: 100%;
      text-align: center;
      background-color: rgba(213, 86, 207, 0.3);
      z-index: 999; 
      cursor: pointer;
   }
   .overlay-content {
      padding: 20px;
   }
   .overlay-button {
      background-color: #38dc29; 
      color: white; 
      border: none;
      padding: 20px;
      cursor: pointer;
      font-size: 20px;
      text-align: center; 
      display: block; 
      margin: 50px auto;  
   }
</style>
</head>
<body>
   <div class="overlay-container" onclick="overlayFun()">
      <h1>Tutrialspoint CSS Overlay</h1>
   </div>
   <div style="padding:20px">
   <button class="overlay-button" onclick="overlayFun()">Click on Button</button>
   </div>
   <script>
      let overlayVisible = false;
      function overlayFun() {
         const overlay = document.querySelector(".overlay-container");
         overlay.style.display = overlayVisible ? "none" : "block";
         overlayVisible = !overlayVisible;
      }
   </script>
</body>
</html>

CSS Overlay - Top to Bottom Sliding

There are four different ways to create a sliding overlay effect: top, bottom, left, and right. We will discuss each type one by one with an example.

The following example shows an image with an overlay that slides down from the top of the image to the bottom when the user hovers over it −

<html> 
<head> 
<style> 
   .overlay-container img { 
      width: 200px; 
      height: 200px; 
      margin-left: 40%;
   } 
   .overlay-container { 
      position: relative; 
      width: 25%; 
      height: auto;
   }  
   .overlay-container:hover .top-bottom { 
      opacity: 1; 
      height: 200px; 
   } 
   .top-bottom{ 
      position: absolute; 
      transition: 0.9s ease; 
      opacity: 0.3; 
      width: 200px; 
      border-radius: 5px;
      height: 0; 
      top: 0; 
      left: 40%;  
      background-color: #d346e6; 
      text-align: center;
      color: #ffffff;
   }
   h2 {
      text-align: center;
   }   
</style> 
</head> 
<body> 
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container"> 
      <img src= "images/tutimg.png"> 
      <div class="top-bottom">
         <h2>Top to Bottom Image Overlay</h2>
      </div> 
   </div> 
</body> 
</html>

CSS Overlay - Bottom to Top Sliding

The following example shows an image with an overlay effect that slides up from the bottom of the image to the top when the user hovers over it −

<html> 
<head> 
<style> 
   .overlay-container img { 
      width: 200px; 
      height: 200px; 
      margin-left: 250px;
   } 
   .overlay-container { 
      position: relative; 
      width: 25%; 
      height: auto;
   }  
   .overlay-container:hover .bottom-top { 
      opacity: 1; 
      height: 200px; 
   } 
   .bottom-top { 
      position: absolute; 
      transition: 0.9s ease; 
      opacity: 0.3; 
      width: 200px; 
      border-radius: 5px;
      height: 0; 
      bottom: 0; 
      left: 250px;  
      background-color: #d346e6; 
      text-align: center;
      color: #ffffff;
   }
   h2 {
      text-align: center;
   }   
</style> 
</head> 
<body> 
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container"> 
      <img src= "images/tutimg.png"> 
      <div class="bottom-top">
         <h2>Bottom to Top Image Overlay</h2>
      </div> 
   </div> 
</body> 
</html>

CSS Overlay - Left to Right Sliding

The following example shows an image with an overlay effect that slides from left to right when you hover over it −

<html>
<head>
<style>
   .overlay-container img {
      width: 200px;
      height: 200px;
      margin-left: 250px; 
   }
   .overlay-container {
      position: relative;
      width: 25%;
      height: auto;
   }
   .overlay-container:hover .left-right { 
      opacity: 1;
      width: 200px;
   }
   .left-right { 
      position: absolute;
      transition: 0.9s ease;
      opacity: 0.3;
      width: 0; 
      border-radius: 5px;
      height: 200px; 
      top: 0;
      left: 0; 
      margin-left: 250px;
      background-color: #d346e6;
      text-align: center;
      color: #ffffff;
   }
   h2 {
      text-align: center;
   }
</style>
</head>
<body>
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container">
      <img src="images/tutimg.png">
      <div class="left-right">
         <h2>Left to Right Image Overlay</h2>
      </div>
   </div>
</body>
</html>

CSS Overlay - Right to Left Sliding

The following example shows an image with an overlay effect that slides from right to left when you hover over it −

<html>
<head>
<style>
   .overlay-container img {
      width: 200px;
      height: 200px;
      margin-left: 250px; 
   }
   .overlay-container {
      position: relative;
      width: 67%;
      height: auto;
   }
   .overlay-container:hover .right-left { 
      opacity: 1;
      width: 200px; 
   }
   .right-left { 
      position: absolute;
      transition: 0.9s ease;
      opacity: 0.3;
      width: 0; 
      border-radius: 5px;
      height: 200px; 
      top: 0;
      right: 0; 
      background-color: #d346e6;
      text-align: center;
      color: #ffffff;
   }
   h2 {
      text-align: center;
   }
</style>
</head>
<body>
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container">
      <img src="images/tutimg.png">
      <div class="right-left">
         <h2>Right to Left Image Overlay</h2>
      </div>
   </div>
</body>
</html>

CSS Overlay - Fade Effect

The following example shows how to create an overlay that appears on top of an image when the user hovers over it −

<html> 
<head> 
<style> 
   .overlay-container img { 
      width: 200px; 
      height: 200px; 
      margin-left: 250px;
   } 
   .overlay-container { 
      position: relative; 
      width: 25%; 
   }  
   .overlay-container:hover .fade-effect { 
      opacity: 0.9; 
      height: 200px; 
   } 
   .fade-effect { 
      position: absolute; 
      transition: 0.9s ease; 
      opacity: 0; 
      width: 200px; 
      height: 200px; 
      border-radius: 5px;
      top: 0; 
      left: 250px;  
      background-color: #d346e6; 
      text-align: center;
      color: #ffffff;
   }
   h2 {
      text-align: center;
   }   
</style> 
</head> 
<body> 
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container"> 
      <img src= "images/tutimg.png"> 
      <div class="fade-effect">
         <h2>Fade Overlay Effect</h2>
      </div> 
   </div> 
</body> 
</html>

CSS Overlay - Image Title Overlay

Here is an example of an overlay that displays the title of an image when the user hovers over it −

<html> 
<head> 
<style> 
   .overlay-container img { 
      width: 200px; 
      height: 200px; 
      margin-left: 250px;
   } 
   .overlay-container { 
      position: relative; 
      width: 25%; 
   }  
   .overlay-container:hover .title-overlay { 
      opacity: 0.9; 
      height: 80px; 
   } 
   .title-overlay { 
      position: absolute; 
      transition: 0.9s ease; 
      opacity: 0; 
      width: 200px; 
      height: 80px; 
      border-radius: 5px;
      bottom: 0; 
      left: 250px;  
      background-color: #d346e6; 
      text-align: center;
      color: #ffffff;
   }
   h1 {
      text-align: center;
      color: #a0f037;
   }   
</style> 
</head> 
<body> 
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container"> 
      <img src= "images/tutimg.png"> 
      <div class="title-overlay">
         <h1>Tutorialspoint</h1>
      </div> 
   </div> 
</body> 
</html>

CSS Overlay - Image Icon Overlay

Here is an example of an overlay that displays the icons over an image when the user hovers over it −

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style> 
   .overlay-container {
      position: relative;
      width: 200px; 
      height: 200px; 
      margin-left: 40%;
   }  
   .overlay-container img { 
      width: 100%; 
      height: 100%;
   }
   .icon-overlay {
      position: absolute; 
      transition: 0.9s ease; 
      opacity: 0; 
      width: 100%;
      height: 100%; 
      top: 0;
      background-color: rgba(211, 70, 230, 0.9); 
      text-align: center;
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .overlay-container:hover .icon-overlay {
      opacity: 1;
   }
   .display-icon {
      color: rgb(60, 235, 50);
      font-size: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
   } 
   h2 {
         text-align: center;
   }
</style> 
</head> 
<body> 
   <h2>To see the effect, hover your cursor over the image.</h2>
   <div class="overlay-container"> 
      <img src="images/tutimg.png"> 
      <div class="icon-overlay">
         <a href="#" class="display-icon">
            <i class="fa fa-star"></i> 
         </a>
      </div> 
   </div> 
</body> 
</html>

CSS Overlay - Related Properties

Following table lists of CSS properties which help create overlay effect:

Property Value
position Defines how an element is positioned on the page.
opacity Sets the transparency of an element.
z-index Sets the stacking order of elements.
transition Defines the different types of animation effects that can be applied to elements.
Advertisements