Zoom Effect on Image Hover within Div using CSS

In HTML&CSS  |  Last Updated on Mon, 02 May 2016

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);
}

 

HTML Code

<div class="pro">
  <img src="car.png" width="500" height="340">
  <div class="pro-overlay top"></div>
</div>