CSS Image overlay hover title
Last Updated :
13 Jun, 2022
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"
<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"
<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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...