Auto Zoom Image dengan CSS

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.

Preview

Untuk melihat preview nya, tekan tombol preview diatas
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

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM