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 zoom/scale an element on hover with CSS?
To zoom/scale an element on hover with CSS, we can use the transform: scale() function or the zoom property. These techniques create smooth hover effects that enhance user interaction by making elements appear larger when the mouse cursor hovers over them.
Syntax
/* Using transform scale */
selector:hover {
transform: scale(value);
}
/* Using zoom property */
selector:hover {
zoom: value;
}
Method 1: Using transform scale()
The transform: scale() function is the recommended approach as it's part of the CSS3 standard and provides better cross−browser compatibility. It scales elements from their center point without affecting the document layout.
Example 1: Scaling a Div Element
Here's how to create a zoom effect on a div element using the scale() method −
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.scale-box {
width: 150px;
height: 150px;
background-color: #4CAF50;
margin: 50px auto;
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.scale-box:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<h2>Hover to Scale</h2>
<div class="scale-box">Hover Me</div>
</body>
</html>
A green square box with "Hover Me" text appears. When you hover over it, the box smoothly scales up by 20% and returns to normal size when the hover ends.
Example 2: Scaling an Image
This example demonstrates how to apply the zoom effect to an image element −
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.image-container {
width: 200px;
height: 150px;
margin: 50px auto;
overflow: hidden;
border: 2px solid #ddd;
border-radius: 8px;
}
.scale-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.scale-image:hover {
transform: scale(1.15);
}
</style>
</head>
<body>
<h2>Image Zoom on Hover</h2>
<div class="image-container">
<img src="/html/images/test.png" alt="Test Image" class="scale-image">
</div>
</body>
</html>
An image inside a bordered container appears. When hovering over the image, it smoothly scales up by 15% while staying within its container boundaries.
Method 2: Using zoom Property
The zoom property is a non−standard CSS property that was originally introduced by Internet Explorer. While it works in most modern browsers, it's less reliable than the transform approach.
Example 1: Zoom Effect on Div
Here's how to create a zoom effect using the zoom property −
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.zoom-box {
width: 150px;
height: 150px;
background-color: #2196F3;
margin: 50px auto;
transition: zoom 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.zoom-box:hover {
zoom: 1.3;
}
</style>
</head>
<body>
<h2>Zoom Property Effect</h2>
<div class="zoom-box">Zoom Me</div>
</body>
</html>
A blue square box with "Zoom Me" text appears. When hovering, the entire box zooms to 130% of its original size and returns to normal when hover ends.
Comparison
| Property | Browser Support | Standard | Performance |
|---|---|---|---|
transform: scale() |
Excellent | CSS3 Standard | Hardware accelerated |
zoom |
Good (IE legacy) | Non-standard | May affect layout |
Conclusion
The transform: scale() method is the preferred approach for creating hover zoom effects as it's standards−compliant and provides better performance. The zoom property works but should be avoided in favor of the more reliable transform approach.
4K+ Views
