Skip to content
Related Articles

Related Articles

CSS Image overlay hover title
  • Last Updated : 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: 
 

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :