How to Create Image Overlay Hover using HTML & CSS ?

31 Mar, 2020
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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                  class="image">            <div class="overlay overlayFade"></div>        </div>    </center></body>  </html>
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                  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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                class="image">            <div class="overlay overlayLeft"></div>        </div>    </center></body>  </html>                    
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                class="image">            <div class="overlay overlayRight"></div>        </div>    </center></body>  </html>                    
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                class="image">            <div class="overlay overlayTop"></div>        </div>    </center></body>  </html>                    
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                class="image">            <div class="overlay overlayBottom"></div>        </div>    </center></body>  </html>    
<!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="https://media.geeksforgeeks.org/wp-content/uploads/20200325132558/download311.png"                class="image">            <div class="overlay overlayBottom"></div>        </div>    </center></body>  </html>    
Output: 
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
Build a Survey Form using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
Design a Tribute Page using HTML & CSS