Like Us on Facebook

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

}
 

HTML Code

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

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 0 )

    Leave a comment..

    Click to login.