CSS Image overlay hover title - GeeksforGeeks

29 Jul, 2020
In this article we will learn how to create an image overlay title when the mouse has hovered over it, using HTML and CSS. This can be done by including the image and title div in a single div (container). The title div is initially invisible. It becomes visible only when the mouse has hovered over the image.
The title div is positioned relative to the container div (parent). It is made invisible by setting either the “opacity: 0” or “z-index: -1” (z-index : -1 implies that title div layer is now at the back of container div and hence invisible). It becomes visible only on hover by setting its “opacity: 1” or “z-index: 0 “ respectively as shown in the following examples.
Example 1: Here, opacity of the title div is initially 0 and changes to 1 on hover with a transition of 0.6 seconds.
<!DOCTYPE html><html>  <head>    <style>        .container {            position: relative;            width: 30%;        }          #gfg-img {            width: 100%;            display: block;        }          .title {            background-color: rgb(0, 0, 0, 0.5);        /*positioned relative to parent div (container) */            position: absolute;    /* bottom margin is 0 so that it      coincides with container's bottom margin*/            bottom: 0;                         color: white;            width: 100%;            font-size: 25px;            padding: 15px 0;            text-align: center;            /*invisible because opacity is 0*/            opacity: 0;                        transition: 0.6s;        }          .container:hover .title {        /*becomes visible on hover*/             opacity: 1;                  }    </style></head>  <body>    <h1>Hover over image to see title</h1>    <div class="container">        <img id="gfg-img" src="gfg.png">         <!--overlay title-->        <div class="title">GeeksforGeeks</div>     </div></body>  </html>
Output:
Example 2: Here, z-index of the title div is initially -1 which means it is at the back of container div. It changes to 0 on hover with a transition of 0.8 seconds as shown below:
<!DOCTYPE html><html>  <head>    <style>        .container {            position: relative;            width: 50%;        }          #gfg-img {            width: 100%;            display: block;        }          .title {            background-color: rgb(255, 255, 255, 0.4);            position: absolute;/*title is positioned at the top of container div*/             top: 0;             color: white;            width: 100%;            font-size: 25px;            padding: 15px 0;            text-align: center; /*title div is at the back of container and hence not visible*/            z-index: -1;            transition: 0.8s;        }          .container:hover .title {/*becomes visible on hover as title comes on top of container*/            z-index: 0;         }    </style></head>  <body>    <h1>Hover over image to see title</h1>    <div class="container">        <img id="gfg-img" src="gfg2.jpg">         <!--overlay title-->        <div class="title">GeeksforGeeks</div>    </div></body>  </html>
Output:  
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?