Skip to content
Related Articles
Open in App
Not now

Related Articles

CSS Image overlay hover title

Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
Improve Article
Save Article

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 the title div layer is now at the back of the 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, the opacity of the title div is initially 0 and changes to 1 on hover with a transition of 0.6 seconds.

HTML




<!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"
        <!--overlay title-->
        <div class="title">GeeksforGeeks</div>
    </div>
</body>
 
</html>

Output:

 

Example 2: Here, the z-index of the title div is initially -1 which means it is at the back of the container div. It changes to 0 on hover with a transition of 0.8 seconds as shown below:

HTML




<!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"
        <!--overlay title-->
        <div class="title">GeeksforGeeks</div>
    </div>
</body>
 
</html>

Output: 

 

HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!