Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create an image overlay zoom effect on hover with CSS?
The image overlay zoom effect on hover creates a smooth animation where a colored overlay scales up when the mouse cursor hovers over an image. This effect uses the :hover selector combined with CSS transforms and transitions to create an engaging visual interaction.
Syntax
.container:hover .overlay {
transform: scale(1);
transition: transform duration ease-function;
}
HTML Structure
First, create a container with an image and overlay div ?
<div class="card-container">
<img src="image.jpg">
<div class="overlay">
<div class="caption">Caption Text</div>
</div>
</div>
Container Positioning
Set the container position to relative to allow absolute positioning of the overlay ?
.card-container {
position: relative;
width: 300px;
}
Image Styling
Style the image to fill the container completely ?
img {
display: block;
width: 100%;
height: auto;
}
Overlay Setup
Position the overlay absolutely and set initial scale to 0 for the zoom effect ?
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(55, 74, 179, 0.8);
transform: scale(0);
transition: transform 0.5s ease-in-out;
}
Hover Effect
Define the hover state to scale the overlay to full size ?
.card-container:hover .overlay {
transform: scale(1);
}
Caption Positioning
Center the caption text within the overlay ?
.caption {
color: white;
font-size: 24px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
Complete Example
Here's the complete working example of the image overlay zoom effect ?
<!DOCTYPE html>
<html>
<head>
<style>
.card-container {
position: relative;
width: 300px;
margin: 20px auto;
border-radius: 10px;
overflow: hidden;
}
img {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(55, 74, 179, 0.8);
transform: scale(0);
transition: transform 0.5s ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.card-container:hover .overlay {
transform: scale(1);
}
.caption {
color: white;
font-size: 24px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<h2>Image Overlay Zoom Effect</h2>
<div class="card-container">
<img src="/css/images/logo.png" alt="Sample Image">
<div class="overlay">
<div class="caption">Hover Effect</div>
</div>
</div>
</body>
</html>
An image with rounded corners appears. When you hover over it, a blue overlay scales up from the center with "Hover Effect" text, creating a smooth zoom animation.
Conclusion
The image overlay zoom effect combines CSS transforms, transitions, and the :hover pseudo-class to create engaging interactive elements. The key is using transform: scale() with smooth transitions for professional-looking hover animations.
893 Views
