Auto Zoom Image dengan CSS

12.17 |

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 Dengan jQuery bagian ini lebih simpel dari yang sebelumnya dan tanpa script jQuery namun dalam penerapannya harus manual.

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

Posting Komentar

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( :-q =))