How to Create an Image Overlay with Text, from the Left with 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 an Image Overlay with Text, from the Left, with CSS Only. For the project, there is an image. When the mouse pointer goes over the image, a curtain emerges vertically, from the left edge of the image and covers the image. When the mouse pointer goes out of the image (curtain), the reverse happens. At full cover of image, the text "Hello World" is at the middle center of the image.
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 appearance of the curtain from the left edge, within 0.5s. Move the mouse pointer out of the image (curtain) for the curtain to retract back into the left edge of the image, still in 0.5s. The image is in the broad-network.com website. So the reader has to be hooked onto the Internet in order to have the image downloaded into his/her computer, for viewing. 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 with Text, from the Left with CSS Only</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 image is in a div element in the HTML body element.
The HTML body Element Content
The content of the body element is:
<h2>From Left, 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 an innermost div with class-name, "text" and with content, "Hello World". This inner div is configured (coded in CSS) to appear and disappear (see below).
Strategy
The inner div has the innermost div with the text, "Hello World". The inner div should be considered as the curtain. The inner div is coded to always be in a layer in front of the image (outer div). When the mouse pointer is not over the image (outer div), the inner div is at the left edge, with a width of zero. When the mouse pointer is over the outer div (image), the inner div is given a width of 100%, and it extends rightwards, to cover the image (outer div), in 0.5s. When the mouse pointer goes out of the image (outer div), restoration takes places, still in 0.5s. This restoration is not coded. It happens as a result of the first transition.
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 innermost div and text. The inner div is 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;
}
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;
width: 0%;
height: 100%;
left: 0;
top: 0;
background-color: #008CBA;
transition: .5s ease;
}
The absolute position property can be seen in the CSS rule. The width of the inner div (which is the curtain) is 0px. And so the inner div at this point, is just a one dimensional vertical line, at the left edge of the outer div. This zero width vertical line, has a height of 100%, relative to the outer div. It will remain 100% when the inner div extends rightwards.
The properties, "left: 0;" and "top: 0;" mean, that whether the inner div is extended rightwards or not, its top end is at the top end of the outer div; and its left end is at the left end of the outer div. Remember that an absolute positioned element, needs such properties.
For a div to extend rightwards, its properties (and values) have to be "left: 0;" and "top: 0;", starting with a width of 0% and height 100%. For a div to extend from top to bottom, its properties (and values) have to be "left: 0;" and "top: 0;", starting with a height of 0% and width 100%. For a div to extend from right to left, its properties (and values) have to be "top: 0;" and "right: 0;", starting with a width of 0% and height 100%. For a div to extend from bottom to top, its properties (and values) have to be "right: 0;" and "bottom: 0;", starting with a height of 0% and width 100%.
The background color is #008CBA (blue green). "transition: .5s ease;" means that when the mouse pointer is over the image (outer div), the inner div will extend to completion within 0.5s. Retraction is also within 0.5s, when the mouse pointer goes out.
Styling the Innermost div.text
The CSS rule for the innermost div.text is:
div.container div.overlay div.text {
position: absolute;
display: none;
white-space: nowrap;
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 "Hello World" is already typed (coded) as content in the innermost div in the HTML body element. The innermost div with its text as content, has not been given any dimension (no width, no height). It does not have to be given any dimension. And so, while the width of the inner div is 0%, the "Hello World" text will extend outwards from the zero width and will be seen, when it is not supposed to be seen. So, the display property of the innermost div is made none, and not displayed, at this point.
Since the innermost div has not been given any dimension, during transition or at steady state, its content text may wrap (down to the next line). To prevent such wrapping, the "white-space: nowrap;" property is employed.
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
One of the CSS rules, while the mouse pointer is over the outer div is:
div.container:hover div.overlay {
width: 100%;
}
Note from the selector that the inner overlay div is the target and not the outer container div. However, the outer div is the div that receives the on-hover event. Remember that the inner div is somewhat always present, in a layer, in front of the outer div. When the mouse pointer goes over the outer div, the width of the inner div is made 100%, relative to the width of the outer div. The extension of the inner div takes 0.5s to completely cover the outer div (image). When the mouse pointer goes out of the outer div, restoration takes place, and that transition takes 0.5s, as well. The transition property is typed only once, in the div.overlay CSS rule.
Remember that, when the mouse pointer is not over the outer div (image), the display property of the innermost div is none (not seen). However, when the mouse pointer goes over the outer div, the innermost div, especially its content, has to be displayed (seen). The CSS rule for this is:
div.container:hover div.overlay div.text {
display: block;
}
The Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Image Overlay with Text, from the Left with CSS Only</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;
}
div.overlay {
position: absolute;
width: 0%;
height: 100%;
left: 0;
top: 0;
background-color: #008CBA;
transition: .5s ease;
}
div.container div.overlay div.text {
position: absolute;
display: none;
white-space: nowrap;
color: white;
font-size: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
div.container:hover div.overlay {
width: 100%;
}
div.container:hover div.overlay div.text {
display: block;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>From Left, 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 see the appearance of the curtain from the left edge, within 0.5s. Move the mouse pointer out of the image (curtain) for the curtain to retract back into the left edge of the image, still in 0.5s. The image is in the broad-network.com website. So the reader has to be hooked onto the Internet in order to have the image downloaded into his/her computer, for viewing.
Chrys