Membuat animasi effect zooming image hover dengan jQuery

Kali ini saya mau berbagi bagaimana caranya membuat animasi efek zooming image hover dengan jQuery, efek yang dihasilkan adalah dengan memperbesar gambar, jadi ketika gambar dihimpiri mose, gambar langsung memperbesar dirinya.

Berikut ini javascriptnya :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('.images img').animate({width: 50}, 0);
 $('.images').mouseover(function(){
 gridimage = $(this).find('img');
 gridimage.stop().animate({width: 100}, 150);
 }).mouseout(function(){
 gridimage.stop().animate({width: 50}, 150);
 });
});
</script>

Ini css nya :

<style type="text/css">
*{ padding:0; margin:0; }
img{ border: none; -ms-interpolation-mode: bicubic; }
body{ padding:10; }

#wrapper{ position:relative; margin-top:50px; padding-top:100px; width:650px; display:block;}
#insidewrapper { position:absolute; bottom:0; left:0; }
.images{ position:fixed relative; bottom:0px; display:inline-block; }
</style>

dan ini html nya :

<h1>Membuat animasi efek image hover dengan jquery</h1>
<div id="wrapper">
 <div id="insidewrapper">
 <a href="#"><img src="facebook.png"></a>
 <a href="#"><img src="twitter.png"></a>
 <a href="#"><img src="youtube.png"></a>
 <a href="#"><img src="gmail.png"></a>
 <a href="#"><img src="yahoo.png"></a>
 </div>
</div>

Untuk melihat hasilnya silahkan klik link di bawah ini:

Demo

Selamat menikmati…
Jangan lupa komen nya ya…