How to Create a Background Color with Text Overlay On Hover over Image 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 a Background Color with Text Overlay On Hover over Image using CSS Only. For this project, the background color and text is like a curtain. The curtain covers the whole image when the mouse pointer goes over the image. When the mouse pointer goes out of the image (out of the curtain) the curtain 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 image, to have the curtain with text appear. Move the mouse pointer out of the image (out of the curtain), for the curtain to disappear. 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>Background Color with Text Overlay On Hover</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 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="overlay">
<div class="text">Hello World</div>
</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 "overlay". The content of this inner div is another div, which is the innermost div. The content of this innermost div is the text, "Hello World". The innermost div has the class-name "text". The inner div (not the innermost div) is the curtain. 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: 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 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;
}
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.
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;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #008CBA;
opacity: 0;
transition: .5s ease;
}
The top of the inner div is 0px below the top of the outer div. The right end of the inner div is 0px to the left of the right end of the outer div. The bottom end of the inner div is 0px up the bottom end of the outer div. The left end of the inner div, is 0px to the right of the left end of the outer div. With those four properties, the whole image (whole outer div) would be covered.
The background color is #008CBA (blue green). The opacity is 0. This means that the inner div, with its background color and text, that forms the curtain, covers the image behind it with no transparency. "transition: .5s ease;" means the inner div appears within 0.5 seconds and disappears within 0.5 seconds.
Styling the Innermost div.text
The CSS rule for the innermost div.text is:
div.container div.overlay div.text {
position: absolute;
color: white;
font-size: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
It has the absolute position property to be in a layer in front of the outer div. So, the outer div with its relative position property, serves the inner div with its absolute position property and also serves the innermost div with its absolute position property as well.
The text color is white and the font-size is 20px. The top of the innermost div is 50% down the top of the outer div. The left end of the innermost div is 50% to the right of the left end of the outer div. This puts the middle center 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).
Outer div On Hover
The CSS rule while the mouse pointer is over the outer 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). 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>Background Color with Text Overlay On Hover</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: 300px;
}
img.image {
width: 100%;
height: auto;
}
div.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #008CBA;
opacity: 0;
transition: .5s ease;
}
div.container div.overlay div.text {
position: absolute;
color: white;
font-size: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.container:hover div.overlay {
opacity: 1;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Background with Text in 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="overlay">
<div class="text">Hello World</div>
</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 have the curtain with text appear. Move the mouse pointer out of the image (out of the curtain), for the curtain to disappear. 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