Hariom
Prajapati
22 Jun 2022
HTMLIn this tutorial we will learn how to zoom an image on mouse hover using CSS. This type of effect is basically used in portfolio or any type of sites.
We can zoom image on mouse hover by two possible ways :-
- Using CSS
- Using JavaScript
In this we will use two section of code. First section of code contain HTML code and second section of code contain CSS code.
HTML code
In the first section, we will use HTML code to create basic structure to perform image zoom on hover effect.
<!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 using CSS </title>
</head>
<body>
<div class="teknowize">
<img src="https://scontent.fpat3-3.fna.fbcdn.net/v/t1.6435-9/173435656_100553882178512_5067283647022573909_n.png?_nc_cat=106&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=YI-DPfxix60AX_04-6p&_nc_oc=AQm4t1zTSXcQOtWsECWg1b54FYG-yKvts0yit49eZyz7CE2XfRIVi4R4ohi89BeAmD8&tn=8lmRwSjEcX7Ytb8g&_nc_ht=scontent.fpat3-3.fna&oh=aeb0e2f0e59fb3efc1c038d45cb9ba6a&oe=61C06B91" alt="teknowize Image" />
</div>
</body>
</html>
CSS code
In the second section, we will use CSS code to perform image zoom on hover effect. Here we will use transform and transition cascading style sheet property.
<style>
.teknowize {
margin: 0 auto;
width: 300px;
height: 300px;
overflow: hidden;
}
.teknowize img {
width: 100%;
transition: 0.5s all ease-in-out;
}
.teknowize:hover img {
transform: scale(1.5);
}
</style>
Now we will combine both the HTML and CSS section to perform Zoom an Image on Mouse Hover using CSS
<!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 using CSS </title>
<style>
.teknowize {
margin: 0 auto;
width: 300px;
height: 300px;
overflow: hidden;
}
.teknowize img {
width: 100%;
transition: 0.5s all ease-in-out;
}
.teknowize:hover img {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="teknowize">
<img src="https://scontent.fpat3-3.fna.fbcdn.net/v/t1.6435-9/173435656_100553882178512_5067283647022573909_n.png?_nc_cat=106&ccb=1-5&_nc_sid=09cbfe&_nc_ohc=YI-DPfxix60AX_04-6p&_nc_oc=AQm4t1zTSXcQOtWsECWg1b54FYG-yKvts0yit49eZyz7CE2XfRIVi4R4ohi89BeAmD8&tn=8lmRwSjEcX7Ytb8g&_nc_ht=scontent.fpat3-3.fna&oh=aeb0e2f0e59fb3efc1c038d45cb9ba6a&oe=61C06B91" alt="teknowize Image" />
</div>
</body>
</html>
Output
