Membuat Efek Gambar Membesar Kedalam [Zoom In] Dengan CSS3

Membuat Efek Gambar Membesar Kedalam [Zoom In] Dengan CSS3 - Pada artikel sebelumnya telah dibahas mengenai 2 efek gambar yang sama-sama menggunakan JavaScript yaitu efek gambar expando dan efek gambar preview. Kedua efek gambar tersebut juga sama-sama memiliki efek zoom namun berbeda saat efeknya bekerja. Selain 2 efek zoom gambar tersebut, pada artikel ini saya juga memberikan sebuah efek zoom gambar lainnya yaitu efek gambar membesar kedalam atau zoom in

Efek gambar membesar [zoom in] ini tidak sama dengan efek gambar sebelumnya karena pada pembuatan efek ini tidak diperlukan javascript atau kode jQuery, cukup menggunakan kode CSS yaitu CSS3. Sehingga Anda tidak perlu khawatir karena selain tidak banyak memiliki ukuran juga tidak mempengaruhi proses loading blog Anda :)

Real Demo

Silahkan sorot ketiga gambar diwbawah ini:

Dari real demo efek gambar zoom in diatas, sebenarnya hanya satu kode yang saya buat tapi ketiga tampilan contoh diatas hanya membandingkan penggunaan dari value yang diberikan pada efek zoom in sehingga memiliki tampilan berbeda seperti diatas

Berikut Cara Membuat Efek Gambar Membesar Kedalam [Zoom In] Dengan CSS3

CSS

Salin kode CSS untuk efek gambar zoom in berikut ini kedalam template blog Anda. Demo untuk kode dibawah ini ada pada gambar yang paling kiri pada tampilan demo diatas

.image-hover {position:relative;display:inline-block;overflow:hidden;}
.image-hover a {text-decoration:none}
.image-hover img {margin:10px}
.img-zoom-in img {transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
.img-zoom-in:hover img {transform:scale(0.1);-webkit-transform:scale(0.1);-moz-transform:scale(0.1);-ms-transform:scale(0.1);-o-transform:scale(0.1)}

Jika tampilan efek zoom in seperti pada gambar yang tengah atau gambar yang kanan pada demo diatas, maka cukup mengganti value scale dari nilai transform yang diberikan
Contoh:
transform:scale(0.1);-webkit-transform:scale(0.1);-moz-transform:scale(0.1);-ms-transform:scale(0.1);-o-transform:scale(0.1) diganti dengan
transform:scale(0.7);-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-ms-transform:scale(0.7);-o-transform:scale(0.7) apa yang terjadi? Silahkan terapkan dan cek sendiri :)

CATATAN:
Untuk browser selain Chrome dan Firefox, efek zoom in ini belum pernah saya coba karena saya tidak pernah menggunakan browser yang lain selain chrome dan firefox

HTML

Untuk menerapkan kode css efek gambar membesar kedalam diatas, maka diperlukan kode HTML agar bisa menampilkan efek yang diinginkan. Dan salin kode HTML berikut ini untuk menerapakan efek zoom in tersebut

<div class="image-hover img-zoom-in">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixYzrn7JqHZa9CF9V1YENntpjdumWkVISwExyhkOwoNYjsybc4GtjC-iiKR4yXSKr5dSsdXJDwVOpUJvV5LP5vVEo9jypW1sPV7lLVDdCAGg7EuYhTQDm6GP-TtopQFo2lbQcnR5uSviQ/s200/blogger-ptb.png" />
</div>

Dari kode HTMl diatas, yang perlu diganti adalah url link gambar

JavaScript

Tidak ada kode javascript untuk efek gambar zoom in!

Bagaimana mudah bukan untuk membuat efek gambar membesar kedalam atau zoom in? Dari penjelasan diatas mungkin terbaca agak ribet tapi sebenarnya sangat mudah karena yang perlu dilakukan adalah hanya menyalin kode CSS dan HTML saja. Dan untuk menambah kreatifitas, cobalah sedikit mengedit kode CSS diatas, seperti penambahan background atau warna teks :)
Okey, jika ada yang mengalami kesulitan atau kode diatas tidak bekerja di blog Anda, silahkan tinggalkan komentar untuk artikel ini, Membuat Efek Gambar Membesar Kedalam [Zoom In] Dengan CSS3