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.
Image-Zoom-With-CSS3(techumber.com)


demo

download

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.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.