Postingan kali ini saya hanya ingin mengetengahkan trik sederhana membuat effect hover pada image dengan bantuan CSS. Langsung saja ikuti petunjuk berikut ini :
- Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
- Tambahkan kode CSS berikut diatas tag atau 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;
}
- Simpan Template
Sedikit penjelasan dari kode CSS diatas, untuk membuat effect buram atau hover pada image kode yang kita tambahkan adalah "hovereffect" sedangkan "opacity", "filter:" alpha, "-moz-opacity" dan "-khtml-opacity" adalah digunakan untuk membuat effect hover terbaca pada beberapa browser. Seperti:
Properti "opacity" digunakan untuk browser yang mendukung standar CSS3 (sebagian besar browser modern mendukung CSS3).
Sementara "filter: alpha" adalah untuk Internet Explorer,
"-Moz-opacity" adalah untuk untuk Firefox, walaupun versi baru mendukung "opasitas",
"-Khtml-opacity" adalah untuk Safari dan Chrome untuk kompatibilitas ke belakang.
"0.5" dan "1.0" digunakan untuk memberitahu browser kuantitas kegelapan.
Sekarang untuk menambahkan effect ini, sobat harus menambahkan class = "hovereffect" untuk image sobat.
Sebagai contoh biasanya ketika kita menambahkan image kodenya sebagai berikut:
<a href="http://i42.tinypic.com/6ellog.jpg"><img border="0" height="240" src="http://i42.tinypic.com/6ellog.jpg" width="320" /></a>Untuk menambahkan effect hover pada image kodenya jadi seperti dibawah ini:
<a class="hovereffect" href="http://i42.tinypic.com/6ellog.jpg"><img border="0" height="240" src="http://i42.tinypic.com/6ellog.jpg" width="320" /></a>
Effect hover ini tidak saja berfungsi untuk blogger tapi juga dapat digunakan dalam platform blog yang menggunakan CSS, seperti Wordpress.
0 komentar:
Post a Comment