How to Create Different Overlay Effects using CSS?

Last Updated : 30 Jul, 2024

Overlay effects are a powerful way to enhance the visual appeal and user experience of a website. With CSS, creating various overlay effects can be achieved relatively easily, offering designers a plethora of creative possibilities.

Below are the approaches to create different overlay effects using CSS:

Table of Content

Overlay with Color
Using Slide Overlay

Overlay Effect with Color

Define a container div for the image with nested elements for overlay and content.
Style the image container to position elements and set image dimensions.
Create an overlay with a semi-transparent background using CSS.
Initially, set the overlay's opacity to 0 to make it invisible. On hover, change the opacity to reveal the overlay.
Position the content div within the container. Style the text content for visibility and aesthetics.

Example: The example below shows how to create overlay effects with the CSS colour.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>
          Overlay with 
          Semi-Transparent Color
      </title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #fff;
        }

        h1 {
            font-family: Arial, sans-serif;
            text-align: center;
            color: rgb(23, 214, 102);
            margin-top: 20px;
        }

        .image-container {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .image-container img {
            display: block;
            width: 400px;
            height: auto;
            margin: 0 auto;

        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .image-container:hover .overlay {
            opacity: 2;
        }

        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgb(23, 214, 102);
            font-size: 24px;
            text-align: center;
            font-family: Arial, sans-serif;
            z-index: 2;
        }
    </style>
</head>

<body>
    <div class="image-container">
        <h1>
              Hover over the image 
              to see the overlay
          </h1>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240514123440/image.jpg" 
             alt="DevOps Roadmap">
        <div class="overlay"></div>
        <div class="content">
              You Hover The Image
          </div>
    </div>
</body>

</html>

Output:

Screenshot-_418_ — Output : Overlay with Color

Using Slide Overlay Effect

Create an HTML document with a container div for the image and overlay.
Place an image inside the container.
Define styles for the body, header, and image container and Set dimensions and positioning for the image.
Implement a sliding overlay effect using CSS pseudo-elements.Initially position the overlay off-screen to the left also utilize transitions for smooth animation.
Trigger the overlay animation on hover using the :hover pseudo-class.
Transition the overlay from off-screen to cover a portion of the image.

Example : The example below shows how to create overlay effects by the slide overlay.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Hover Slide Overlay</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
        }

        h1 {
            font-family: Arial, sans-serif;
            text-align: center;
            color: rgb(23, 214, 102);
            margin-bottom: 20px;
        }

        .slide-overlay-container {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        .slide-overlay-container img {
            display: block;
            width: 400px;
            height: auto;
            margin: 0 auto;
        }

        .slide-overlay::before {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            transition: left 0.3s ease;
        }

        .slide-overlay-container:hover .slide-overlay::before {
            left: 0;
        }
    </style>
</head>

<body>
    <h1>Hover Slide Overlay</h1>
    <div class="slide-overlay-container">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240514123440/image.jpg" 
             alt="DevOps Roadmap">
        <div class="slide-overlay"></div>
    </div>
</body>

</html>

Output:

How to create image overlay hover slide effects using CSS ?

skaftafh

Improve

Article Tags :

How to Create Different Overlay Effects using CSS?

Overlay Effect with Color

Using Slide Overlay Effect

Similar Reads

Thank You!

What kind of Experience do you want to share?