How to Create an Image Overlay Full Zoom-In On Hover 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 an Image Overlay Full Zoom-In On Hover using CSS Only. For the project, there is an image. When the mouse pointer goes over the image, a curtain emerges zooming-in from the middle center of the image, to cover the whole image. When the mouse pointer goes out of the image, the reverse happens. Zooming-in means extending outwards, while zooming-out means retracting inwards. At full zoom-in, 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 and full zoom-in. Move the mouse pointer out of the image to see the full zoom-out and disappearance. 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, 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 Full Zoom-In 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 image is in a div in the HTML body element.
The HTML body Element Content
The content of the body element is:
<h2>Image Overlay Full Zoom-In On Hover</h2>
<p>Hover over the image to see the zoom 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 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 CSS "transform: scale(0);" property and value, makes the width and height of the inner div 0, and so the inner div with its innermost div and text, is not seen. When the mouse pointer is over the image (outer div), the changed CSS "transform: scale(1);" property and value, gives the full width and height for the inner div, and so the inner div with its innermost div and text, is seen.
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;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #008CBA;
transform: scale(0);
transition: .3s ease;
}
The absolute position property can be seen in the CSS rule. 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 value for the transform scale property is 0. This means that under normal circumstances (mouse out), the inner div, with its content, though in front of the outer div (image) occupies no space, and cannot be seen. Though the inner div with its content is not shown currently, it covers (in theory) the whole outer div (image), because of the properties, "top: 0; right: 0; bottom: 0; left: 0;" .
"transition: .3s ease;" means that when the mouse pointer is over the image (outer div), the inner div with its content, will take 0.3s to completely cover the image (outer div), naturally from the middle center.
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 {
transform: scale(1);
}
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 "transform: scale(1);" property and value, extends the inner div (and its content), naturally from the middle center, to the top, right, bottom and left ends of the outer div (image). That transition takes .3s. The scale value is 1 this time, and not zero. When the mouse pointer goes out of the outer div, restoration takes place, and that transition takes 0.3s, as well. The transition property is typed only once, in the div.overlay CSS rule.
The Complete Webpage Code
And there you have it. The complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Image Overlay Full Zoom-In 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: 350px;
}
img.image {
width: 100%;
height: auto;
}
div.overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #008CBA;
transform: scale(0);
transition: .3s 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 {
transform: scale(1);
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<h2>Image Overlay Full Zoom-In On Hover</h2>
<p>Hover over the image to see the zoom 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 and full zoom-in. Move the mouse pointer out of the image to see the full zoom-out and disappearance. 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, for viewing.
Chrys