Cara Buat Zoom Image Ketika Di Sorot

Berikut adalah kode untuk membuat effect zoom;

<style type="text/css">

.ow 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 10px 5px 0;

}

.ow img:hover{

-webkit-transform:scale(1.1);

-moz-transform:scale(1.1);

-o-transform:scale(1.1);

opacity: 1;

}

</style>

<a class="ow" href="http://twitter.com/kurniasepta" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3YEdASMPTsc570vuPoXlv1YOBxuYwEz2x_PWRCJR7jSSfgIU-OM_zrtPfiP18P4UFRq7t9Mr9Jd-DFJHBMT0wjGBl75WCh-AWStoh46EgiPuTQd7ks10sqUORiH0l89CVr_nNkhGRg4/s320/follow.jpg" /></a>

Ganti kode yang berwarna Biru dengan URL yang dituju dan yang berwarna merah dengan URL gambar. Kamu bisa menambahkan kode diatas di post dengan memilih HTML saat menulisnya. Atau juga bisa ditambahkan di sidebar dengan memanfaatkan gadget HTML/Java Script di blogger. Hasilnya akan seperti ini:

Bagaimana?

Mudahkan?

Selamat mencoba..