Cara berikut merupakan cara sederhana untuk menampilkan efek zoom pada image :
hajar saja code berikut !!
CSS
.zoom 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}
.zoom img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}
Penerapannya:
Gunakan HTML dibawah ini untuk memanggil CSS diatas
HTML
<div class="zoom">
<img src="URL GAMBAR SOBAT" /></div>
Contoh
<div class="zoom">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSTJh3XfSO3i4lNYoJD4LuguleYhyphenhyphen_mpxrBo6nUTlBycOM40rdubWj8T2fKHmDxmdVkT5qqXe_N5WNVPRtYsXuphOXt9XgIk76_WDNdsP0GbJu_YXEaYeEUPvc-J9wkA7D6NErL2RVL0o/s1600/flying+dutchman.png" /></div>
