Membuat Zoom Pada Gambar

Posting kali ini menanggapi pertanyaan reader blog saya, saya hanya akan menjelaskan bagaimana membuat gambar di blog kita bisa membesar bila di lalui kursor dan mengecil ke ukuran semula setelah kursor tidak di atas gambar. Contohnya seperti  gambar di bawah

.

Caranya pertama kamu masuk ke editor HTML blogger, kalau tampilan blogger kamu baru, mungkin kamu tidak akan menemukan editor HTML, caranya kamu buka url ini http://draft.blogger.com/html?blogID=(nomor ID blogger kamu) dan id blog di isi dengan id blog yang akan kamu beri efek hover di gambar atau bisa juga masuk ke template designer tutorialnya bisa kamu lihat di sini.


Kalau sudah masuk kamu cari kode ]]></b:skin> kalau sudah ketemu, letakkan kode berikut tepat sebelum atau di atas kode ]]></b:skin>

.hovergallery img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}.hovergallery img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}

Setelah itu simpan template kamu.

Nah untuk memberi efek hover di gabar, tinggal kamu tuliskan kode untuk hover gambarnya di antara kode gambar :

<div class="hovergallery"> URL GAMBAR KAMU </div>

Misalnya seperti ini

<div class="hovergallery">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLHHZv3_Ut3OOFSF9onGXiaW_UoFmrwSPl_u8aIq82o1vURGjjSdHHxh5xiHZqjJ76YFeGbQvDjcctAQDlal7CAPbx9cbFKsuGP-f2h9zaYWnKS3KD1FuU6QHkZnoUCWCLvyTy25RjZc7i/s220/068908-black-inlay-steel-square-icon-alphanumeric-information1.png</div>

kode di atas adalah gambar logo blog ini efek zoomdengan  seperti pada contoh.

Nah sekarang selamat mencoba, semoga berhasil :)

Posted in: Sharing TKJ.com