Image Zoom Effect With CSS3

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.


Create following files in your test folder.

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

For demonstration I am taking two images here.

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 valude_all_ 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.