Techumber

Image Zoom Effect With CSS3

Github avatar
Dimpu
September 19, 2012. 2 min read

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.


...