Cara membuat gambar membesar saat disentuh Cursor

Assalamu'alikum Wr Wb.

Cara membuat gambar membesar saat disentuh Cursor. Kembali lagi di blog saya vbphotoshop.blogspot.com. Kali ini saya akan mebagikan lagi tutrial tentang web atau blog. Tutorial yang akan saya bagikan kali ini yaitu cara supaya gambar membesar saat disentuh cursor, dalam dunia blgger fitur seperti ini sering disebut Image Zoom Effects atau Hove Zom Smoth effects. Fitur seperti ini lumayan sering digunaka leh para bloger, walaupunn sebenarnya malah menghalangi pembaca untuk membaca isi blog. Oke, lansung aja. Ini dia cara supaya gambar membesar saat dihampiri cursor.

1. Login dulu di blogger.com

2. Setelah login pilih blog anda. Di menu utama atau dashboard klik template.

dashboard

Lalu klik edit HTML

3. Cari kode ]]></b:skin> gunakan Crtl+F untuk mempermudah pencarian. Tambahkan script berikut diatasnya.

.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); }

4. Setelah itu simpan template. Dan lihat hasilnya..

Sekian tutorial Cara membuat gambar membesar saat disentuh Cursor..