How to Create Text Overlay On Hover, over Image that Fades, using CSS Only
Image Overlay
How To, for Front End and Web Applications
By: Chrysanthus Date Published: 8 May 2025
This tutorial explains How to Create Text Overlay On Hover, over Image that Fades, using CSS Only. For this project, there is a short horizontal text bar, that will appear at the middle center of the image, when the mouse pointer goes over the image. The image will then fade a bit. When the mouse pointer goes out of the image, the short horizontal bar will go away. The original image nature, will be restored.
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 image, to see the effect. Move the mouse pointer out of the image to see the change. The 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>Text Overlay On Hover, over Image that Fades</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>Background with Text in Fading Overlay</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="text">
Hello World
</div>
</div>
There is an outer div with class-name "container". The first element of this div is the image tag for the image. The class-name for the image element is "image". The second element for this outer div is an inner div, whose class-name is "text". The content of this inner div is the text, "Hello World". 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).
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: 350px;
}
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 350px. So, for wide screens, the width will be 350px. For small screens, the width will be either 350px or less. It will be less, if 350px is wider than half 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;
transition: .5s ease;
}
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. "transition: .5s ease;" means that when the moue pointer goes over the image (outer div), the image should take 0.5s to fade, and when the mouse pointer goes out of the image, the image should take 0.5s to un-fade.
Styling the Inner div
When the mouse pointer goes over the outer div (image), the inner div with class-name, "middle" should appear. When the mouse pointer goes outside the outer div (image), the inner 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.text {
position: absolute;
opacity: 0;
text-align: center;
color: white;
font-size: 16px;
padding: 16px 32px;
background-color: #04AA6D;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: .5s ease;
}
The inner div is the short horizontal bar. The inner div has the absolute position property. The opacity is 0, meaning it is completely transparent. So, on normal view, the inner div and its text is not visible, but it is there, in a layer in front of the outer div. The text is center aligned. The text color is white. The font-size is 16px. The top and bottom padding is 16px and the right and left padding is 32px. The background color of the short bar is #04AA6D (greenish). The reader should note that the dimensions (length and width) of the inner div are implicitly very small.
The top of the inner div is 50% down the top of the outer div. The left end of the inner div is 50% to the right of the left end of the outer div. This puts the middle ceter of the div.text, slightly below and slightly to the right of the middle center of the outer div (image). The CSS property "transform: translate(-50%, -50%);" offsets that and puts the middle center of the div.text, at the middle center of the outer div (image).
"transition: .5s ease;" means the inner div appears within 0.5 seconds and disappears within 0.5 seconds.
Image On Hover
The CSS rule, while the mouse pointer is over the image is:
div.container:hover img.image {
opacity: 0.3;
}
The image develops an opacity of 0.3, making it faded.
Inner div On Hover
The class-name of the inner div is text. The CSS rule, while the mouse pointer is over the inner div is:
div.container:hover div.text {
opacity: 1;
}
Its opacity becomes 1, meaning it is completely opaque, and so very visible (no transparency).
Transition
Note that the img.image and the div.text, each take .5s to appear into their new state, and 0.5s to disappear into their old state, when there is mouse over and mouse out respectively. Those actions should be synchronized.
The Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Text Overlay On Hover, over Image that Fades</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>
div.container {
position: relative;
width: 50%;
max-width: 350px;
}
img.image {
width: 100%;
height: auto;
transition: .5s ease;
}
div.text {
position: absolute;
opacity: 0;
text-align: center;
color: white;
font-size: 16px;
padding: 16px 32px;
background-color: #04AA6D;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: .5s ease;
}
div.container:hover img.image {
opacity: 0.3;
}
div.container:hover div.text {
opacity: 1;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Background with Text in Fading Overlay</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="text">
Hello World
</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 image, to see the effect. Move the mouse pointer out of the image to see the change. The 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