Image Zoom Effect With CSS3

Published on September 19, 2012

From Last few days I have been playing with CSS3 and HTML5. CSS3 is just WOW!. I think CSS3 giving good competition to jquery animation effects. In this tutorial I am going to explain how can we achieve Image Zoom Effect using CSS3. I am taking one of my previous tutorial Image Zoom Effect with Jquery. This time I will use the CSS3 for same effect. Have a look at the demo below.

Files Create following files in your test folder. —index.html —style.css index.html

<div class="imgholder">
  <img src="img/img1.jpg" alt="img1" />
</div>
<div class="imgholder">
  <img src="img/img2.jpg" alt="img12" />
</div>

For demonstration I am taking two images here. style.css

.imgholder {
  float: left;
  width: 220px;
  height: 318px;
  border: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 0px 0px 2px #999999;
  overflow: hidden;
  padding: 0px;
  margin-left: 30px;
}
.imgholder img {
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -o-transition: all 0.8s ease;
}
.imgholder img:hover {
  height: 110%;
  width: 110%;
  margin-left: -15px;
  margin-top: -15px;
}

This is the main code we need to under stand. Here imageholder is just class we use it to put our image tag inside it. In .imgholder img we have a css property transition with browser prefixes. transition property has valudeall for all properties with in it. Here all properties are width and height. In img:hover we increase the with and height of image to 110%. Thats it we got it. Hope! You like it!:D

**Note:**Since this is CSS3 use CSS3 supported browser for test the code.