Menambahkan Efek Zoom Pada Gambar di Blog

Pada artikel saya yang lalu, saya sudah pernah membahas tentang bagaimana membuat efek gabungan aantara drop shadow dengan efek zoom pada gambar. Oleh karena mungkin ada blogger yang hanya ingin salah satu efek dari kedua efek tersebut saja yang dipasangkan pada gambar, maka kali ini saya hanya akan membahas tentang bagaimana cara menambahkan efek zoom pada gambar. Dengan menambahkan efek zoom pada gambar anda di blog, maka anda tidak perlu untuk mengklik gambar agar gambar menjadi lebih besar. Anda hanya perlu meletakkan mouse anda pada gambar, maka gambar tersebut akan membesar secara otomatis (fungsi zoom). Contohnya dapat anda lihat pada link demo di bawah ini.

Live Demo

Menambahkan Efek Zoom Pada Gambar

Step 1

Masuk ke halaman dashboard > Template > HTML > Expand widget template

Step 2

Letakkan kode berikut tepat di atas kode ]]></b:skin>

.TKBZoom img{
-webkit-transform:scale(0.7);
-moz-transform:scale(0.7);
-o-transform:scale(0.7);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.TKBZoom img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Step 3

Save Template

Step 4

Tambahkan kode yang ditandai warna merah berikut sebelum kode gambar anda.

<div class="TKBZoom" style="text-align: center;">
<a href="URL GAMBAR" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="URL GAMBAR" /></a>
</div>

Bila anda ingin menyesuaikan letak gambar, anda hanya perlu mengubah "center" menjadi "left" atau "right".
Selamat mencoba!
Wassalam. 
 

Written by: Rysmah Zainal Arifin

The Kampoeng Blogger, Updated at: 12:42 AM

Posted in: Body , Efek , Gambar