Open In App

How to Create Image Overlay Hover using HTML & CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will go over 5 different types of overlays: left, right, top, bottom, and fade. You are going to need two divs. One will be your overlay div, containing what will show up once the user hovers over the image, and the other will be a container that holds both the image and its overlay. The inner div, which represents the overlay, will have two classes. One that you will use to style all overlays and the other represents the specific overlay type (left, right, up, down, or fade).

Your image should be placed outside the inner div (overlay) but inside the outer one (container). Don’t forget to add an alternative text describing the image to assist users that rely on the screen reader.

HTML Code:




<!DOCTYPE HTML>
<html>
  
<head>
    <meta charset="UTF-8">
    <title>Image Overlay</title>
</head>
  
<body>
    <center>
        <h1 class="title">
    GeeksforGeeks
    </h1>
        <b>Image Overlay</b>
        <br>
        <br>
        <div class="container">
            <img src=
                class="image">
            <div class="overlay overlayLeft"></div>
        </div>
    </center>
</body>
  
</html>                    


CSS Code: Set the container’s position relative to its normal position and define its width and height. The key to getting the overlay to work is to set its position to absolute. That means its positioned relative to its nearest positioned ancestor, which in this case is the image. So that the overlay isn’t always there and only shows up when the user hovers over the image, set its opacity to zero, meaning completely transparent. Use “background-color” to set the color of your overlay. Use “transition” so that the overlay gradually appears instead of popping up over the image. Since we set the opacity of the overlay to zero, once we hover over the container we want to set that opacity to 1. That means, once the user hovers over the container item, the overlay will appear.




<style>
    body {
        text-align: center;
    }
       
    h1 {
        color: green;
    }
       
    .container img {
        width: 250px;
        height: 250px;
    }
       
    .container {
        position: relative;
        width: 400px;
        height: auto;
    }
</style>


Fade Overlay: Width and height of the overlay are the width and height of the image equal od div image. Once you hover over the image, the overlay appears on top of that image.

  • Program:




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <meta charset="UTF-8">
        <title>Image Overlay</title>
        <style>
            body {
                text-align: center;
            }
              
            h1 {
                color: green;
            }
              
            .container img {
                width: 250px;
                height: 250px;
            }
              
            .container {
                position: relative;
                width: 400px;
                height: auto;
            }
              
            .overlay {
                position: absolute;
                transition: all 0.3s ease;
                opacity: 0;
                background-color: #9bcd9b;
            }
              
            .container:hover .overlay {
                opacity: 1;
            }
              
            .overlayFade {
                height: 250px;
                width: 250px;
                top: 0;
                left: 75px;
                background-color: #9bcd9b;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1 class="title">
          GeeksforGeeks
        </h1>
            <b>Image Overlay</b>
            <br>
            <br>
            <div class="container">
                <img src=
                     class="image">
                <div class="overlay overlayFade"></div>
            </div>
        </center>
    </body>
      
    </html>

    
    

  • Output:

Left Overlay: Height of the overlay is the height of the image (100%). Width is zero and set to left. Width is set to 100% once you hover over the image and gradually moves from left to right.

  • Program:




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <meta charset="UTF-8">
        <title>Image Overlay</title>
        <style>
            body {
                text-align: center;
            }
              
            h1 {
                color: green;
            }
              
            .container img {
                width: 250px;
                height: 250px;
            }
              
            .container {
                position: relative;
                width: 400px;
                height: auto;
            }
              
            .overlay {
                position: absolute;
                transition: all 0.3s ease;
                opacity: 0;
                background-color: #9bcd9b;
            }
              
            .container:hover .overlay {
                opacity: 1;
            }
              
            .overlayLeft{
                height: 100%;
                width: 0;
                top: 0;
                left: 75px;
                background-color: #9bcd9b;;
            }
              
            .container:hover .overlayLeft{
            width: 250px;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1 class="title">
        GeeksforGeeks
        </h1>
            <b>Image Overlay</b>
            <br>
            <br>
            <div class="container">
                <img src=
                    class="image">
                <div class="overlay overlayLeft"></div>
            </div>
        </center>
    </body>
      
    </html>                    

    
    

  • Output:

Right Overlay: Height of the overlay is the height of the image (100%). Width is zero and set to right. Width is set to 100% once you hover over the image and gradually moves from right to left.

  • Program:




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <meta charset="UTF-8">
        <title>Image Overlay</title>
        <style>
            body {
                text-align: center;
            }
              
            h1 {
                color: green;
            }
              
            .container img {
                width: 250px;
                height: 250px;
            }
              
            .container {
                position: relative;
                width: 400px;
                height: auto;
            }
              
            .overlay {
                position: absolute;
                transition: all 0.3s ease;
                opacity: 0;
                background-color: #9bcd9b;
            }
              
            .container:hover .overlay {
                opacity: 1;
            }
              
            .overlayRight{
                height: 100%;
                width: 0;
                top: 0;
                right: 75px;
                background-color: #9bcd9b;;
            }
              
            .container:hover .overlayRight{
            width: 250px;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1 class="title">
        GeeksforGeeks
        </h1>
            <b>Image Overlay</b>
            <br>
            <br>
            <div class="container">
                <img src=
                    class="image">
                <div class="overlay overlayRight"></div>
            </div>
        </center>
    </body>
      
    </html>                    

    
    

  • Output:

Top Overlay: Width of the overlay is the width of the image (100%). Height is zero and set to top. Height is set to 100% once you hover over the image and gradually moves from top to bottom.

  • Program:




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <meta charset="UTF-8">
        <title>Image Overlay</title>
        <style>
            body {
                text-align: center;
            }
              
            h1 {
                color: green;
            }
              
            .container img {
                width: 250px;
                height: 250px;
            }
              
            .container {
                position: relative;
                width: 400px;
                height: auto;
            }
              
            .overlay {
                position: absolute;
                transition: all 0.3s ease;
                opacity: 0;
                background-color: #9bcd9b;
            }
              
            .container:hover .overlay {
                opacity: 1;
            }
              
            .overlayTop{
                width: 250px;
                height: 0;
                top: 0;
                right: 75px;
                background-color: #9bcd9b;;
            }
              
            .container:hover .overlayTop{
            height: 250px;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1 class="title">
        GeeksforGeeks
        </h1>
            <b>Image Overlay</b>
            <br>
            <br>
            <div class="container">
                <img src=
                    class="image">
                <div class="overlay overlayTop"></div>
            </div>
        </center>
    </body>
      
    </html>                    

    
    

  • Output:

Bottom Overlay: Width of the overlay is the width of the image (100%). Height is zero and set to bottom. Height is set to 100% once you hover over the image and gradually moves from bottom to top.

  • Program:




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <meta charset="UTF-8">
        <title>Image Overlay</title>
        <style>
            body {
                text-align: center;
            }
              
            h1 {
                color: green;
            }
              
            .container img {
                width: 250px;
                height: 250px;
            }
              
            .container {
                position: relative;
                width: 400px;
                height: auto;
            }
              
            .overlay {
                position: absolute;
                transition: all 0.3s ease;
                opacity: 0;
                background-color: #9bcd9b;
            }
              
            .container:hover .overlay {
                opacity: 1;
            }
              
            .overlayBottom{
                width: 250px;
                height: 0;
                bottom: 0;
                right: 75px;
                background-color: #9bcd9b;;
            }
              
            .container:hover .overlayBottom{
            height: 255px;
            }
        </style>
    </head>
      
    <body>
        <center>
            <h1 class="title">
        GeeksforGeeks
        </h1>
            <b>Image Overlay</b>
            <br>
            <br>
            <div class="container">
                <img src=
                    class="image">
                <div class="overlay overlayBottom"></div>
            </div>
        </center>
    </body>
      
    </html>    

    
    

  • Output:


Last Updated : 31 Mar, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads