JavaScript
CSS
jQuery
MySQL
PHP
Laravel
Python
HTML Course Code
White Board
CSS Minifier
Gradient Generator
PDF to Text Converter
Text Converter
Age Calculator
Pincode Details Finder
PX ⇄ REM Converter
PX ⇄ EM Converter
WEBP Converter
Coding Ground
Resume Builder
Sumit Sarkar
25 Oct 2024
CSSIn this tutorial, we will learn how to zoom an image on mouse hover using css.
Sometimes we need to add an image zoom effect when hovering on an image, This effect is used for highlighting image details and enhancing the user experience.
Here we will explore two different ways to implement image zoom on hover by using css transform property along with scale property and zoom property.
Zoom an image on mouse hover by using CSS transform and scale property.
Syntax
transform: scale(value);Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zoom an image on mouse hover by using CSS transform and scale property </title>
<style>
.img-div {
margin: 0 auto;
width: 300px;
height: 300px;
overflow: hidden;
}
.img-div img {
width: 100%;
transition: 0.5s all ease-in-out;
}
.img-div:hover img {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="img-div">
<img src="https://www.w3coderschool.com/attachments/file_1729864290.png" alt="w3coderschool Image" />
</div>
</body>
</html>Output
Zoom an image on mouse hover by using CSS zoom property.
Syntax -
zoom: value;Example
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>
To Zoom an Image on
Mouse Hover using CSS
</title>
<style>
body {
text-align: center;
}
.img-div img:hover {
zoom: 1.2;
}
</style>
</head>
<body>
<div class="img-div">
<img src="https://www.w3coderschool.com/attachments/file_1729864290.png" alt="w3coderschool Image" />
</div>
</body>
</html>Output
Conclusion
In conclusion, both the zoom and scale properties in CSS are used to create an image zoom effect on hover.
Leave a comment