Zoom Effect on Image Hover within Div using CSS
Hello friends Today we are going to share HTML and CSS code for creating a zoom effect on image hover. Zooming image on mouse hover can be created using CSS3 scaling transformation. This tutorial is very easy and this effect can be easily created using few lines of code.

CSS Code
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.pro {
position: relative;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.pro img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.pro:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.pro {
position: relative;
border: 1px solid #333;
margin: 2%;
overflow: hidden;
width: 540px;
}
.pro img {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.pro:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
HTML Code
<div class="pro">
<img src="car.png" width="500" height="340">
<div class="pro-overlay top"></div>
</div>
<img src="car.png" width="500" height="340">
<div class="pro-overlay top"></div>
</div>
![]() |
Live Demo |
|

Comments ( 0 )
Subscribe Latest Information
Categories
Most Popular Posts
How to Withdraw Money from ATM Machine 7steps 1180844 Views
How to Create Chat Application in Android Studio 152391 Views
How to Create a Shopping Cart Application in Android 115490 Views
You May Like Also
Flip Hover Effects using HTML and CSS 5166 Views
Simple image hover effect using CSS 3914 Views
Blur image hover effect using CSS 5280 Views
Flashing image hover effect using CSS 7633 Views