Memberikan efek hover pada image

Kamis, 24 Juni 2010

Memberikan efek hover pada image

Efek hover dapat kita berikan pada gambar yang ada pada blog kita dengan bantuan edit CSS. Efek hover ini sering dipergunakan untuk mempercantik tampilan dari sebuah blog. Gambar yang di beri efek hover akan memiliki warna yang agak gelap ketikan di jauhkan dari pointer. Tetapi ketika pointer didekatkan maka gambar tersebut akan berubah sesuai dengan efek warna asli nya.

Untuk lebih jelasnya coba perhatikan gambar diatas :
Udah jelaskan beda nya.Nah sekarang yang jadi masalah adalah bagaimana cara membuatnya, sebenernya simple saja cara membuat nya.

Kamu harus login dulu dihalaman blogger ----) pada dasbor ----) rancangan ----) Edit HTML
Biasa kan sebelum mengedit HTML dari template blog kamu, dahulu kan memback up kode templatenya. Sehingga ketika terjadi hal-hal yang tak di inginkan kamu mudah mengembalikan template kamu. ----) Klik Expand Template.
Cari kode berikut : ]]></b:skin>
Lalu masukkan kode berikut tepat diatas kode tersebut. Lalu disimpan.....

.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;
}

Efek hover pada suatu web/blog bisa saja tidak berjalan dengan baik. Hal ini bisa terjadi dikarenakan perbedaan kode CSS yang digunakan di setiap browser berbeda. Maka dari itu dalam kode CSS diatas terdapat beberapa kode yang memiliki arti dan fungsi yang sama tetapi memiliki perbedaan bentuk (kodenya). Hal semacam ini kita antisipasi dengan memasukkan perintah yang terbaca oleh masing - masing browser. Seperti :

"Opacity" digunakan untuk mendukung browser yang mendukung CSS3 (Sebagian besar browser modern mendukung CSS3)
Moz-Opacity digunakan untuk mendukung browser Firefox
Khtml-Opacity digunakan untuk mendukung browser Safari dan Chrome

Sedangkan maksud dari 1.0 dan 0.5 menunjukkan tingkat kegelapan dari gambar.
Langkah terakhir yang harus dilakukan adalah : Penyisipan kode class="hovereffect" didalam link gambar kita. Sehingga link gambar kita menjadi :

<a class="hovereffect" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_QzUst3dkX3j3q51Wk8LvMI52sZEe1VrnTqWBwFBHqEkglP63577IhqlTg5UPkHJxlRZDZnCmg1OLBE5LBxJM_fpITpk4vEUXDA2vg7GXtlnTFHsXClvQCt_G7Nd-a12_bnZe1qq2P_GJ/s1600/albantor-batman-tux.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_QzUst3dkX3j3q51Wk8LvMI52sZEe1VrnTqWBwFBHqEkglP63577IhqlTg5UPkHJxlRZDZnCmg1OLBE5LBxJM_fpITpk4vEUXDA2vg7GXtlnTFHsXClvQCt_G7Nd-a12_bnZe1qq2P_GJ/s1600/albantor-batman-tux.png" /></a>

Selamat mencoba....
Dan semoga bermanfaat ......