Membuat Effect Hover Pada Image Dengan CSS

Membuat Effect Hover Pada Image Dengan CSS

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Postingan kali ini saya hanya ingin mengetengahkan trik sederhana membuat effect hover pada image dengan bantuan CSS. Seperti apa effect yang terlihat, silahkan sorotkan pointer pada sample image dibawah ini:
Nah cara menambahkan effect hover pada image untuk template blogger sebagai berikut:
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut diatas tag atau kode ]]>

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

3. 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:

Untuk menambahkan effect hover pada image kodenya jadi seperti dibawah ini:

class="hovereffect"

href="http://i42.tinypic.com/6ellog.jpg"> Effect hover ini tidak saja berfungsi untuk blogger tapi juga dapat digunakan dalam platform blog yang menggunakan CSS, seperti Wordpress.
Lihat juga cara membuat hover pada link disini

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging