baru dibuat kembali

Tahu kan hover ? Saya sendiri bingung untuk menjelaskannya (?). Tapi kira-kira, hover ini bisa diartikan sebagai "suatu kondisi objek ketika mouse diarahkan padanya". Kondisi ini bisa kita buat sedemikian rupa sehingga berbeda dengan saat tidak didekati mouse.

Untuk membuat image hover bisa dilakukan dengan menambahkan atribut pada CSS. Tapi jika sobat memakai framework jQuery, tidak ada salahnya jika memanfaatkan keberadaanya.

• Tambahkan CSS berikut di atas kode ]]></b:skin>:

/*=== Image Meredup ===*/
img {
transition: 1s ease; 
-o-transition: 1s ease; 
-moz-transition: 1s ease; 
-webkit-transition: 1s ease;
}
img:hover {
opacity: 0.7; 
-o-opacity: 0.7; 
-moz-opacity: 0.7; 
-webkit-opacity: 0.7; 
filter: alpha(opacity=70); 
}

• Setelah itu simpan dan ucapkan Alhamdulillah...

• Tambahkan script berikut di bawah kode ]]></b:skin>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
jQuery(document).ready(function(){
    jQuery('img').fadeTo('slow', 1);
        jQuery('img').hover(function() {
        jQuery(this).fadeTo('slow', 0.7); 
        }, function() { 
jQuery(this).fadeTo('slow', 1); 
    }); 
});
</script>

• Setelah itu simpan dan ucapkan Alhamdulillah...

Catatan:

• Atur lamanya transisi. Pada CSS di atas lamanya 1 detik.
• Atur img yang ingin dibuat hover. Pada CSS dan script di atas berlaku untuk semua image dalam perintah <img src="URL-Gambar"/>. Jika ingin kondisional, seperti hanya pada entry saja, ganti img dengan .post img, dst.
• Atur opacity sesuai keinginan. Pada CSS dan script di atas opacity saat hover adalah 70% (0.7).

Ok, segitu aja sob. Semoga bermanfaat .....