Cara Membuat Animasi Gambar saat Disorot dengan Mouse

Sebenarnya sama dengan postingan saya tentang cara membuat gambar menjadi blur ketika disorot mouse (Baca: Cara Membuat Effk Blur pada Gambar )

Ada perbedaan yang tipis antara effek animasi gambar dengan effek blur, yaitu, pada effek blur, jika gambar disorot dengan mouse, maka secara cepat gambar akan nge-blur, sedangkan pada effek animasi, jika gambar disorot dengan mouse, maka secara perlahan-lahan warna gambar akan nge-blur.

Perbedaan yang lain antara effek blur pada gambar dengan effek animasi adalah, jika pada effek blur, gambar akan terlihat lebih kasar, tapi pada effek animasi gambar terlihat lebih halus.
Langsung ke tutorialnya saja ya ^
>Masuk ke blogger
>Buka Design/Rancangan
>Pilih Edit HTML
>Lalu cari kode ]]></b:skin> (Gunakan Ctrl+F)
Setelah ketemu, letakkan kode berikut setelah kode ]]></b:skin>



<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

<script type='text/javascript'>



$(document).ready(function(){

$(&quot;.efekanimasi&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads

$(&quot;.efekanimasi&quot;).hover(function(){

$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover



},function(){

$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout

});

});

</script>

<script type='text/javascript'>

$(document).ready(function(){

$(&quot;.post img&quot;).fadeTo(&quot;slow&quot;, 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads



$(&quot;.post img&quot;).hover(function(){

$(this).fadeTo(&quot;slow&quot;, 0.6); // This should set the opacity to 100% on hover

},function(){

$(this).fadeTo(&quot;slow&quot;, 1.0); // This should set the opacity back to 30% on mouseout



});

});

</script>

>Simpan.