How to Create an Overlay Title On Hover over Avatar using CSS Only
Image Overlay
How To, for Front End and Web Applications
By: Chrysanthus Date Published: 8 May 2025
Imaging that a user has a webpage in front of him. He sees an avatar and decide to move the mouse pointer over it. When the mouse pointer is over it, a small transparent bar appears at the bottom of the avatar, but with non-transparent title and name of the person for the avatar. That is what this tutorial is about. This tutorial explains How to Create an Overlay Title On Hover over Avatar using CSS Only. When the mouse pointer goes out of the avatar, the transparent bar with title and name goes off.
The complete code for this project is given at the end of this tutorial. Copy all the code into a text editor. Save the file with any name, but with the extension, .html . Open the saved file in the browser. Move the mouse pointer over the avatar, to see the transparent low horizontal bar, with non-transparent title and name. Move the mouse pointer out of the avatar, for the title and name to go off. The avatar image is in the broad-network.com website. So the reader has to be hooked on to the Internet, in order to have the image downloaded into his/her computer. The reader is advised to do this, before continuing to read the rest of this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage, to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Image Overlay Title</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any responsible modern webpage should have at least the first four tags in the HTML Head element above. The HTML style element will have all the essential CSS rules. The HTML JavaScript element will be left empty. The div with image is in the HTML body element.
The HTML body Element Content
The content of the body element is:
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">CEO: John Smith</div>
</div>
There is an outer div with class-name "container". The first element of this div is the image tag for the avatar. The class-name for the image element is "image". The second element for this outer div is an inner div, whose class-name is "overlay". The content of this inner div is the title and name of the person for the avatar. This inner div is configured (coded in CSS) to appear and disappear (see below).
The HTML Style Element Content
All the styles (CSS rules) are in the CSS style-sheet (HTML style element).
At the top within the style element content, is the CSS rule:
* {
box-sizing: border-box;
}
This is called the box-sizing property. The asterisk, * in front of the rule, means that it is applied to all the containers, such as the div element. The box-sizing property means that the width of each element is measured from the left edge of the left border, to the right edge of the opposite border, instead of from the left edge of the element's content, to the right edge of the element's content. The box-sizing property also means that the height of each element is measured from the top edge of the top border, to the bottom edge of the opposite border, instead of from the top edge of the element's content, to the bottom edge of the element's content. The box-sizing property makes coding convenient for projects like this one.
Styling the Outer div
The outer div has the image as well as the inner div with the title and name. The inner div will be coded by CSS to appear and disappear in a layer in front of the outer div. So the outer div needs to have a position property while the inner div has an absolute position property. In this case the outer div has the relative position property. The CSS rule for the outer div is:
div.container {
position: relative;
width: 50%;
max-width: 300px;
}
The width of the outer div is 50% that of the body element. For wide screens, this will be too big. So the width is limited to a maximum of 300px. So, for wide screens, the width will be 300px. For small screens, the width will be either 300px or less. It will be less, if 300px is wider than half (50%) of the small screen width. That is a bit of responsiveness.
Styling the Image Element
The CSS rule for the image element is:
img.image {
width: 100%;
height: auto;
display: block;
}
The width of the image is 100% the width of the outer div. So, the width will fill the whole outer div. "height: auto;" means that the browser should choose the height of the image. If the property "display: block;" is absent, then the inner div with its text, will not cover some border stripes of the outer div that it is able to cover. Remember that there is the box-sizing property.
Styling the Inner Overlay div
When the mouse pointer goes over the outer div (image), the inner overlay div should appear. When the mouse pointer goes outside the outer div, the inner overlay div should disappear. So, the outer div should have a position property, while the inner div has the absolute position property. Actually, the outer div has the relative position property. The CSS rule for the inner div is:
div.overlay {
position: absolute;
width: 100%;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* Black and see-through */
opacity:0;
color: white;
font-size: 20px;
text-align: center;
padding: 20px;
transition: .5s ease;
}
The width is 100% of the outer div. Its height is determine by its content, font-size of 20px, and padding of 20px. Its bottom end is 0px up from the bottom end of the outer div. That is why it finds itself at the lower part of the outer div.
Its background color and not the text color is black, with 0.5 out of 1 transparency. Its text color is white without transparency.
Now, the inner div is always displayed in a layer in front of the outer div. However, with an opacity of 0 (complete transparency), nothing in it (non of its content) is seen. "transition: .5s ease;" means the inner div appears within 0.5 seconds and disappears within 0.5 seconds. The text is center aligned.
Outer div On Hover
The CSS rule, while the mouse pointer is over the div is:
div.container:hover div.overlay {
opacity: 1;
}
Note from the selector that the inner overlay div is the target and not the outer container div. Remember that the inner div is always present, in a layer, in front of the outer div. When the mouse pointer goes over the outer div, the opacity of the inner div becomes 1, meaning no transparency, and it is seen (appears).
It is important to note that this opacity of 1, does not override the opacity of 0.5 of the background color of the inner div. The specification of 0.5 for the opacity of the background color of the inner div is still effective.
When the mouse pointer goes out of the outer div, the opacity of the inner div goes back to 0, and it becomes unseen.
The Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Image Overlay Title</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
* {
box-sizing: border-box;
}
div.container {
position: relative;
width: 50%;
max-width: 300px;
}
img.image {
width: 100%;
height: auto;
display: block;
}
div.overlay {
position: absolute;
width: 100%;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5); /* Black and see-through */
opacity:0;
color: white;
font-size: 20px;
text-align: center;
padding: 20px;
transition: .5s ease;
}
div.container:hover div.overlay {
opacity: 1;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">CEO: John Smith</div>
</div>
</body>
</html>
Copy all the code into a text editor. Save the file with any name, but with the extension, .html . Open the saved file in the browser. Move the mouse pointer over the avatar, to see the transparent low horizontal bar, with non-transparent title and name. Move the mouse pointer out of the avatar, for the title and name to go off. The avatar image is in the broad-network.com website. So the reader has to be hooked on to the Internet, in order to have the image downloaded into his/her computer.
Chrys