Memperbesar Gambar dengan Efek "Bouncing"

Letakan cursor pada gambar...

<style type="text/css">
.holder {width:318px; margin:0 auto;}
.zoom {width:96px; height:64px; float:left; margin-left:10px; position:relative;}
.step1 {margin:0; width:96px; height:64px;
-webkit-transition:0s;
-moz-transition:0s;
-ms-transition:0s;
-o-transition:0s;
transition:0s;
}
.step2 {width:100%; height:100%; margin:0;
-webkit-transition:0s;
-moz-transition:0s;
-ms-transition:0s;
-o-transition:0s;
transition:0s;
}
.zoom img {width:100%;}

.zoom:hover {z-index:100;}

.zoom:hover .step1 {width:600px; height:400px; margin-left:-252px; margin-top:-168px;
-webkit-transition:0.3s;
-moz-transition:0.3s;
-ms-transition:0.3s;
-o-transition:0.3s;
transition:0.3s;
}

.zoom:hover .step2 {width:80%; height:80%; margin:40px 60px;
-webkit-transition:0.15s 0.3s;
-moz-transition:0.15s 0.3s;
-ms-transition:0.15s 0.3s;
-o-transition:0.15s 0.3s;
transition:0.15s 0.3s;
}
</style>

<div id="info">
<div style="font-family: &quot;Courier New&quot;,Courier,monospace;">
<span style="font-size: x-large;"><b>Demo :</b></span></div>
<br /><br /><br /><br />
<div class="holder">
<div class="zoom">
<div class="step1">
<div class="step2">
<img src="https://lh4.googleusercontent.com/-68hsmvuuOZM/TrGdB4VTYyI/AAAAAAAAB_0/WdcND0zRmA0/s500/Resize-of-100-0119.jpg" alt="" />

</div>
</div>
</div>
<div class="zoom">
<div class="step1">
<div class="step2">
<img src="https://lh6.googleusercontent.com/-o-93BTHTLxk/TrGdDApQzTI/AAAAAAAAB_w/pJ3Qo333c5g/s500/Resize-of-100-0120.jpg" alt="" />
</div>
</div>
</div>
<div class="zoom">
<div class="step1">
<div class="step2">
<img src="https://lh6.googleusercontent.com/-CScuWLIxf3o/TrGctyD9OuI/AAAAAAAAB9E/6ZHhlFD-OTE/s500/Resize-of-100-0135-1.jpg" alt="" />
</div>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p class="info">Copyright &copy;2012 Buku Catatan si Ugi</p>
<br />
</div> <!-- end of info -->