CSS - Overlay


What is 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.

CSS Overlay

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.

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).

Here is an example −

<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 Image Overlay Slide

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.

Top to Bottom Sliding Overlay

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>

Bottom to Top Sliding Overlay

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>

Left to Right Sliding Overlay

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>

Right to Left Sliding Overlay

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>

Fade Overlay 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>

Image Overlay Title

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>

Image Overlay Icon

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 is the list of CSS properties of overlay:

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.
Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements