Pada artikel kali ini saya akan bahas cara buat efek Hover Image, dimana pada postingan sebelumnya saya juga bahas tentang Efek Hover Image / Link Dengan jQuery.  sebenarnya gak jauh beda dengan postingan sebelumnya, cuma postingan kali ini memberikan efek hover pada image aja, sedangkan postingan sebelumnya, memberikan efek hover image dan juga hover link. tp ngga apa2, mungkin saja selera seseorang beda2 kali.hehe..

Ok jika anda tertarik untuk mencoba langsung saja ikuti langkah dibawah ini :
1. Pertama Login Blog
2. Pilih Layout untuk memulai pengeditan pada Blog yang diinginkan
3. Pilih Tab Edit HTML
4. Letakkan kode berikut ini di bawah ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".post img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".post img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".latest_img").fadeTo("slow", 1.0); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".latest_img").hover(function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity back to 30% on mouseout
});
});
</script>

Lihat juga artikel lainnya :)

Post Author : Utta 'The Shelter'

Gue hanyalah seorang blogger pemula yang ingin belajar dan berbagi, Semua artikel bersumber dari pengalaman yang saya dapatkan dari dunia internet.Jika anda senang dengan Artikel ini, silahkan berlangganan gratis Via Email atau Feed Rss