Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse

Tutorial Blog kali ini saya akan mengajak Sobat Blogger iRFaaN aRiZaL BlogSpot untuk membahas resep soal Cara Membuat Efek Gambar Membesar atau Efek Zoom Image Saat Kursor Mouse diarahkan pada gambar tersebut. Pastinya Sobat blogger semuanya sering menemui blog yang ketika kursore diarahkan pada gambar blog tersebut maka otomatis gambar pada blognya tersebut membesar dengan sendirinya. Nah jika sobat blogger ingin membuat efek tersebut diblognya masing-masing Master Chef akan membahas tuntas dalam postingan ini.

Dengan memasang efek tersebut tampilan blog sobat akan terlihat unik dibanding dengan tampilan blog milik orang lain disisi lain pengunjung akan dimanjakan karena tidak perlu mengklik gambar untuk memperbesar gambar.Bagaimana  Cara Memasangnya ?, Langsung saja berikut Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse :

1. Masih seperti biasanya, sobat blogger harus login terlebih dhulu 
2. Jika sudah login, dari bagian dasboard blog sobat klik Template

3. Sekarang klik pada tombol "Costumize"

4. Klik Pada menu "Advaced"

5. Copas Kode berikut :

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

1. Letakan kode diatas didalam kolom CSS sehingga kode menjadi seperti yang terlihat pada gambar dibawah ini pada bagian kotak warna merah.

2. Jika sudah klik pada tombol "Apply To Blog"
3. Selesai dan Lihat Hasilnya

Demikian sobat blogger iRFaaN aRiZaL BlogSpot dan semuanya. Semoga Tutorial Blog mengenai Cara Membuat Efek Gambar Membesar Saat Diarahkan Kursor Mouse ini bisa memberikan banyak manfaat. Terimakasih!