How to Create Image Overlay Hover using HTML & CSS ?

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:



filter_none

edit
close

play_arrow

link
brightness_4
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>                    

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

  • 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>    

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.