Powered by Blogger.

CSS Zoom contoh Implementasinya



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="http://3.bp.blogspot.com/-3wGZ20MzWxE/UAq8YK4SAII/AAAAAAAAAdo/QEu74rJq78w/s1600/flying+dutchman.png" /></div>

Bannerad

Artikel Terpopuler

Tags

Blogumulus by Roy Tanck and Amanda Fazani