Cara Membuat Gambar Membesar Saat Disentuh Kursor

Cara Membuat Efek Membesar atau Zoom Pada Gambar - Membuat efek gambar membesar ketika disentuh oleh cursor atau kursor sangat membuat gambar lebih menarik dan bisa juga menarik perhatian mata pengunjung blog, selain gambar yang bisa membesar ketika disentuh cursor 

Demo

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode CSS dibawah ini, lalu Paste diatas kode ]]></b:skin>

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

5. Klik Simpan Template

Catatan :
- Kode CSS diatas sudah valid CSS3.
- Kode -webkit-, -moz-, dan -o- dapat menyebabkan Warning saat validasi CSS3, namun masih valid CSS3.