Effeck Hover Pada Gambar / Image Blog ...!

Pada postingan kali ini saya akan menjelaskan cara memberi effect hover pada Image di blog kita. Maksud dari Effect Hover itu sendiri adalah keadaan suatu gambar terlihat buram, namun apabila pointer mouse disorotkan pada gambar tersebut, maka gmabar tersebut akan terlihat jelas. Untuk lebih jelasnya, kalian bisa melihat DEMO PREVIEW NYA DISINI.

pasti kalian ingin tahu kan cara membuatnya..?

untuk membuat sebuah image terlihat buram dan ketika disorot pointer akan terlihat cerah atau jelas, kalian hanya perlu menambahkan kode CSS saja. Berikut perinciannya :

1. Login Ke blogger kalian
2. masuk ke Rancangan
3. Pilih EDIT HTML ( Centang Box Expand Widget Template )
4. Sekarang kalian cari kode ]]></b:skin>
5. Tambahkan kode Css berikut SEBELUM atau DIATAS kode ]]></b:skin>

.hovereffect img {
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.hovereffect:hover img {
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}

KETERANGAN :

== opacity : untuk browser yang mendukung standar CSS3
== filter: alpha : untuk Internet Explorer,
== -Moz-opacity : untuk untuk Firefox, walaupun versi baru mendukung "opasitas",
== -Khtml-opacity : untuk Safari dan Chrome untuk kompatibilitas ke belakang.
== 0.5 dan 1.0 : untuk memberitahu browser kuantitas kegelapan.

6. SIMPAN template

Untuk pemakaiannya terhadap image/gambar, kalian cukup menambahkan kode berikut:

class="hovereffect"

contoh :
== Link Asli

<a href="LINK KALIAN"><img border="0" height="240" src="URL IMAGE KALIAN" width="320" /></a>

== Tambahkan Effect Hover

<a class="hovereffect" href="LINK KALIAN"><img border="0" height="240" src="URL IMAGE KALIAN" width="320" /></a>

Itulah sedikit artikel yang bisa saya berikan pada postingan kali ini dan jangan lupa Berikan komentar kalian untuk artikel ini. Terima kasih.