Memperbesar Gambar Saat Cursor Mengarah di Atas nya

Postingan kali ini saya akan membuat Tips dan Trik Memperbesar Gambar atau foto saat kursor mengarah ke atas gambar atau foto tersebut, Membuat efek tersebut cukup menarik dan bisa juga menarik mata para blogger untuk mencoba nya, Selain gambar menjadi besar kita juga tidak perlu repot-repot melakukan zooming secara manual, karna itu artikel kali ini Memperbesar Gambar Saat Cursor Mengarah di Atas nya, Setidak nya tips dan trik ini cukup untuk menarik pengunjung Blog.

DEMO

• Masuk ke dashboard blogger atau akun anda lalu pilih template 

• Pilih Edit HTML 

• Jangan lupa centang tulisan EXPAND TEMPLATE WIDGET 

• Cari kode ]]></b:skin> dengan menggunakan CTRL+F 

• Copy dan Paste kode dibawah ini tepat diatas kode ]]></b:skin>

• Paste Lalu Save Templete.

.post 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 2px 2px 0;
}
.post img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

Refresh Blog Anda, coba lihat hasil nya dengan melakukan test pada gambar-gambar di blog anda.

.Note :

- Kode CSS diatas sudah valid CSS3.

- Kode -webkit-, -moz-, dan -o- dapat menyebabkan Warning saat validasi CSS3, namun masih valid CSS3.

Share this post