Cara Membuat Auto Zoom Image dengan CSS

Cara Membuat Auto Zoom Image dengan CSS - Auto Zoom Image dengan CSS membuat gambar memperbesar secara otomatis ketika dilalui oleh crusor. Tutorial ini adalah tutorial yang sangat simpel. Oke langsung saja.

Previewnya dapat dilihat pada gambar 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>

Contoh

<div class="zoom">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRfvOjJ3s9Qf5pQHXELHpCuNM-0UVpGa6GnNCBOLAtHP0p-GasgIfC9mwTUuJStUg8X0u1_dxrP3S6Avr5l8VZ9U4KilTF6oKScutoO958o9Ssw24oEWgq9tBH33b6Hny6QuQUZ2O_-K4/s1600/flying+dutchman.png" /></div>

Jangan lupa mampir kesini