CSS Efek Zoom In pada Gambar

Banyak efek yang bisa kita pakai untuk memanipulasi suatu gambar, salah satunya dengan menggunakan efek zoom, yang biasa dipakai untuk toko online atau galery, kita akan membuat efek gambar seperti ini :

Contoh Zoom

Untuk membuat Efek seperti diatas, kita bisa memakai CSS dan HTML seperti berikut:

Code CSS

.zoom img {
  height: 300px;
  width: 300px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.zoom img:hover {
  width: 400px;
  height: 400px;
}

Code HTML

<div class="grow">
<img src="http://link-gambar.jpg">
</div>

Masih banyak efek lain yang bisa kita pakai, dan akan kita buat nanti..OK ^_^

---

---