Mega Happy!!!: Image Hover Opacity
Home About Site Affies Stuffies Request Follow

Image Hover Opacity

 

Hai, semua! Lama enggak ngepost, nih. Kemarin, Esa request gimana cara bikin image hover kayak Naila. Mumpung lagi ada waktu sekarang, Naila post sekarang aja, deh! Langsung aja, yuk!

Sudah pada tahu tentang image hover? Nah, bagi yang belum tahu, coba hover image rollcake diatas! Nanti mage yang tadinya agak transparan, jadi lebih jelas, kan? Nah, itu dia yang dinamakan image hover.

Bagi yang mau pasang, caranya:
  • Buka bloggermu. Pastikan kalian sudah login, ya!
  • Klik Template >> Edit HTML
  • Lalu cari kode: 
]]></b:skin> 
  • Setelah itu, copy code dibawah ini dan pastekan diatas kode ]]></b:skin>.
img{ opacity:0.7;border:none;padding:0px;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;border-radius:10px;}
img:hover{border-radius:30px;
opacity: 1; }
  • Sudah? Save template dan lihat apa yang terjadi dengan gambar-gambar di blogmu!

Mudah, kan? Oke, semoga berhasil ya, Esa. Makasih juga buat Kak Kinanti untuk tutorial image hovernya!


Terima kasih sudah membaca. Jangan lupa tinggalkan komentar ^^

4 komentar:

Silahkan memberi komentar dengan bahasa yang sopan ya!