How to Create an Overlay Effect with CSS?

Overview

CSS as we all know is used to make websites look good. It has many tricks up its sleeve that enable us to do so. An overlay is one such thing. Overlay means covering the surface of an element. You must have encountered them when visiting a website. Many websites have a popup with some form, advertisement, etc, these are examples of an overlay.

In this article, you will learn how to create overlays in CSS.

Pre-requisites

To create an overlay in css you have basic knowledge of

  • CSS positions

That's it. Let's learn how to create CSS overlays

CSS overlay Syntax

Here is the syntax that will create a CSS overlay.

.overlay {
    position : fixed;
    display : none;
    height : 50%;
    width : 50%;
    background-color : lightblue;
    opacity : 50%;
    cursor : pointer;
}

There is a little more to it than just plain CSS. Don't worry we will break it down in the next section.

Basic Example

For an overlay css to work properly we need some JavaScript also. This example will explain to you how the HTML, CSS, and JavaScript can be linked together to create an overlay.

I have taken an example of a single HTML file that contains both JS and CSS, but you can separate them into different files and that will also work just fine.

First let's start with the HTML part:

  <body>
    <div id="overlay" onclick="hideOverlay()"></div>
    <h2>CLICK TO SEE OVERLAY</h2>
    <button onclick="showOverlay()">Open Overlay</button>
  </body>

Output

CSS OVERLAY SYNTEX

CSS

    #overlay {
        position: fixed;
        display: none;
        height: 100%;
        width: 100%;
        background-color: lightblue;
        opacity: 50%;
        cursor: pointer;
      }

In place of position:fixed we can also use position:absolute both will work. With position absolute, we have to specify the top/left/right positions.

JavaScript

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

These two functions are responsible for showing and hiding the overlay css. The function changes the display property of the element.

So after combining HTML, CSS, and JavaScript your output will look like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CSS Overlay</title>
    <style>
      #overlay {
        position: fixed;
        display: none;
        height: 100%;
        width: 100%;
        background-color: lightblue;
        opacity: 50%;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div id="overlay" onclick="hideOverlay()"></div>
    <h2>CLICK TO SEE OVERLAY</h2>
    <button onclick="showOverlay()">Open Overlay</button>
    <script>
      function showOverlay() {
        document.getElementById("overlay").style.display = "block";
      }
      function hideOverlay() {
        document.getElementById("overlay").style.display = "none";
      }
    </script>
  </body>
</html>

Output:

BASIC OVERLAY

How to Create Different Overlay Effects

Fade Overlay Effect

In this effect, an overlay is displayed when we hover over the image

HTML

<!DOCTYPE html>
<html>
<body>
<div class="container">
      <img
        src="https://source.unsplash.com/random/400x200?v1"
        class="image"
        alt=""
      />
      <div class="overlay">
        <div class="projectedText">Overlay Text</div>
      </div>
    </div>
</body>
</html>

CSS

.container {
        position: relative;
        width: 400px;
      }

      .image {
        display: block;
        width: 100%;
        height: auto;
      }
/*Overlay that will show after hovering over container */
      .overlay { 
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: 0.5s ease;
        background-color: #008cba;
      }
/* This will trigger overlay after overing over container*/
      .container:hover .overlay {
        opacity: 1;
      }
/* Text over overlay*/
      .projectedText {
        color: white;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
      }

Output:

FADE OVERLAY

Image Overlay Slide

Four types of sliding effects can be created using a css overlay, these are top, bottom, left, and right. Let's look at them one by one

Slide in Overlay from top to bottom Here the overlay will appear from the top and will continue to the bottom.

HTML

<div class="container">
      <img src="https://source.unsplash.com/random/400x200?v1" alt="Avatar" class="image" />
      <div class="overlay"></div>
    </div>

CSS

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: lightblue;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
}

.container:hover .overlay {
  bottom: 0;
  height: 100%;
}

Output:

TOP TO BOTTOM

Slide in Overlay from bottom to top

<div class="container">
      <img
        src="https://source.unsplash.com/random/400x200?v1"
        alt="Avatar"
        class="image"
      />
      <div class="overlay"></div>
    </div>
.container {
        position: relative;
        width: 50%;
      }

      .image {
        display: block;
        width: 100%;
        height: auto;
      }

      .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: lightblue;
        overflow: hidden;
        width: 100%;
        height: 0;
        transition: 0.5s ease;
      }

      .container:hover .overlay {
        height: 100%;
      }

Output:

BOTTOM TO TOP

Slide in Overlay from left to right HTML

<div class="container">
      <img
        src="https://source.unsplash.com/random/400x200?v1"
        alt="Avatar"
        class="image"
      />
      <div class="overlay"></div>
    </div>

CSS

.container {
        position: relative;
        width: 50%;
      }

      .image {
        display: block;
        width: 100%;
        height: auto;
      }

      .overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: lightblue;
        overflow: hidden;
        width: 0;
        height: 100%;
        transition: 0.5s ease;
      }

      .container:hover .overlay {
        width: 100%;
      }

Output:

LEFT TO RIGHT OVERLAY

Slide in Overlay from right to left HTML

<div class="container">
      <img
        src="https://source.unsplash.com/random/400x200?v1"
        alt="Avatar"
        class="image"
      />
      <div class="overlay"></div>
    </div>

CSS

.container {
        position: relative;
        width: 50%;
      }

      .image {
        display: block;
        width: 100%;
        height: auto;
      }

      .overlay {
        position: absolute;
        bottom: 0;
        left: 100%;
        right: 0;
        background-color: lightblue;
        overflow: hidden;
        width: 0;
        height: 100%;
        transition: 0.5s ease;
      }

      .container:hover .overlay {
        width: 100%;
        left: 0;
      }

Output:

RIGHT TO LEFT OVERLAY

Image Overlay title

HTML

<div class="container">
      <img
        src="https://source.unsplash.com/random/400x200?v1"
        alt="Avatar"
        class="image"
      />
      <div class="overlay">Hello There 👋</div>
    </div>

CSS

 .container {
        position: relative;
        width: 50%;
        max-width: 300px;
      }

      .image {
        display: block;
        width: 100%;
        height: auto;
      }

      .overlay {
        position: absolute;
        bottom: 0;
        background: rgb(0, 0, 0);
        background: rgba(0, 0, 0, 0.5);
        color: #f1f1f1;
        width: 85%;
        transition: 0.5s ease;
        opacity: 0;
        color: white;
        font-size: 20px;
        padding: 20px;
        text-align: center;
      }

      .container:hover .overlay {
        opacity: 1;
      }

Output:

OVERLAY TITLE

Image Overlay icon

For icon we are using Font-Awesome. To make that work we will insert this link tag in the <Head> section of the HTML

 <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
      integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />

HTML

 <div class="container">
      <img
        src="https://source.unsplash.com/random/400x200?v1"
        alt="Avatar"
        class="image"
      />
      <div class="overlay">
        <a href="#" class="icon" title="User Profile">
          <i class="fa-solid fa-hand"></i>
        </a>
      </div>
    </div>

CSS

.container {
        position: relative;
        width: 100%;
        max-width: 400px;
      }

      .image {
        display: block;
        width: 100%;
        height: auto;
      }

      .overlay {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        opacity: 0;
        transition: 0.3s ease;
        background-color: lightblue;
      }

      .container:hover .overlay {
        opacity: 1;
      }

      .icon {
        color: white;
        font-size: 100px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        text-align: center;
      }

      .fa-user:hover {
        color: #eee;
      }

Output:

OVERLAY ICON

Conclusion

Till now you must have learned

  • Overlay means covering the surface of an element.
  • HTML, CSS, and JavaScript can be linked together to create an overlay.
  • The CSS overlay can be triggered by elements when we hover over them or we could also make separate buttons to trigger overlay.
  • We could also display text in the CSS overlay and make them slide as we show in the above examples.
Free Courses by top Scaler instructors
rcbGet a Free personalized Career Roadmap from