Auto Zoom Gambar Dengan CSS

Tutorial | Auto Zoom Image dengan CSS membuat gambar memperbesar secara otomatis ketika dilalui oleh crusor. Tutorial ini adalah bagian kedua dari tutorial sebelumnya yaitu Membuat Efek Zoom Pada Gambar. bagian ini lebih simpel dari yang sebelumnya dan tanpa script jQuery namun dalam penerapannya harus manual.

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/AVvXsEhUS2M3sZoC1gilGcsa3q7nBMQe6AKUlUDyOd_Vr88GVZV8R7e0w18YO0BCpLYoJu-dqzUQJFafOBePayrxqOLz_yaUSPfl152z7DOvP1lOOyPZ_nho12kMSE0Rn-wPa7oFt9RFimnHKeg/s1600/flying+dutchman.png" /></div>

Sekian sahabat Blogger Tutorial, lain kali kita jumpa lagi dengan postingan yang lebih seru :D