Cara Membuat Gambar Membesar Saat Disentuh Cursor

Hahihuheho - Sobat pasti sering melihat gambar yang menjadi besar ketika di sentuh cursor. Di dunia blog, fitur ini disebut dengan Image Zoom Effect atau Hover Zoom Smooth Effect. Fitur ini cukup di senangi para blogger walaupun sedikit mengganggu para pengunjung.

Buat sobat yang ingin memasangnya, silahkan simak baik baik

CARA MEMBUAT IMAGE ZOOM EFFECT :

1. Masuk ke akun blog sobat
2. Pilih Template --> Edit HTML
3. Centang Expand Widget Template
4. Cari kode ]]></b:skin>
5. Letakkan kode di bawah ini tepat diatas kode ]]></b:skin>

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

       6. Terakhir Simpan Template, Selesai :)

Sekarang Lihat Hasilnya!

loading...