Cara Membuat Image Hover/Meredup dan Menyala

Assalamu'alaikum Viewers!

Red-Mercenary - Kali ini admin mau share cara membuat image hover. udah pada tau kan apa itu image hover? kalo belum, nih image hover itu apabila kursor mouse kita dekatkan atau arahkan ke gambar maka gambarnya dapat menyala atau meredup. Tertarik membuatnya untuk di blog kamu? Insya Allah gampang kok, langsung aja check this out.

1. Log in ke blogger sendiri jangan yang orang
2. Pilih menu template
3. Cari kode ]]></b:skin> (Pake ctrl+F biar gampang)
4. Simpan kode di bawah ini di atas kode ]]></b:skin>

img:hover{opacity:1;-o-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;}
img{opacity:0.8;-o-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;}

Konfigurasi :

• Merah : Yang merah untuk ngatur seberapa transparan gambar, untuk yang atas seberapa transparan gambar saat di sentuh kursor, yang bawah seberapa transparan gambar aslinya.
• Biru : untuk mengatur waktu transisi
• Oh iya untuk opacity silahkan isikan angka antara 0.1 sampai 1

Kalo yang diatas ini contoh gambar dari transparan menjadi normal, kalo mau dirubah sebaliknya tinggal dibalik aja opacitynya (kode merah dan birunya dibalik)

Gimana sekarang udah tau kan? sederhana sih tapi lumayan elegan untuk mempercantik blog kamu. Semoga bermanfaat! Glory!