Auto Zoom Image dengan CSS membuat gambar memperbesar secara otomatis ketika dilalui oleh crusor. Tutorial ini yaitu Membuat Efek Zoom Pada Gambar Dengan jQuery bagian ini lebih simpel dari yang sebelumnya dan tanpa script jQuery namun dalam penerapannya harus manual.
Untuk melihat preview nya, tekan tombol preview diatas
Penerapannya pada blog kita ataupun dalam postingan dapat dilihat dibawah ini :
Penerapannya pada blog kita ataupun dalam postingan dapat dilihat dibawah ini :
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>
Semoga tutorial saya bermanfaat bagi sahabat Blogger...
Salam Blogger
(h)
BalasHapus