Cara Praktis Memunculkan Icon Zoom Pada Gambar Posting Blog

Anda pasti pernah mengunjungi ke situs berkategori hiburan yang menampilkan banyak gambar dan disana pasti akan melihat icon zoom setiap kali anda melakukan hover pada gambar dan foto yang ada di situs tersebut. Maka kali ini saya akan membuktikan cara kepada anda menampilkan icon zoom pada setiap gambar di postingan blog secara otomatis.

Sedikit penjelasan yang mungkin anda perlukan, tolong-menolong saya hanya merubah nilai dari properti kursor yang tadinya auto/tampilan normal lalu menggantinya dengan menampilkan icon zoom, yang saya lakukan hanyalah menambahkan deklarasi pada selektor CSS gambar dengan memberi properti nilai zoom-in.

Saya hanya akan merubah kursor/ menampilkan icon zoom pada gambar di postingan blog yang mempunyai link atau gambar yang sanggup dibuka pada fitur lightbox pada dikala pengunjung melakukan hover.

Demo

---

Langkah-langkah :

---

1) Masuk ke akun blogger anda lalu klik Template

2) Klik Back Up lalu klik Edit Template

3) Cari kode ]]></b:skin> lalu tempatkan kode dibawah ini tepat diatasnya.

Klik ganda untuk menyalin

 .post a img:hover{cursor: -webkit-zoom-in ! important; cursor: -moz-zoom-in ! important;} 

4) Klik Simpan Template

Sekarang coba anda lihat gambar pada satu posting blog lalu lakukan hover pada gambar maka icon zoom akan muncul. Semoga bermanfaat. Enjoy & Happy coding.

Sumber https://8tutorialandroid.blogspot.com/

Share this post