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 :)
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
![Membuat Efek Gambar Membesar Kedalam [Zoom In] Dengan CSS3 Membuat Efek Gambar Membesar Kedalam [Zoom In] Dengan CSS3](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp1bCfhBAVvetMhAuMI2UKKAA8N0WDkpYPuNvTSmectxS4mZ0rF9CpOyHNXxY6uqjmqfuVYuaG0VHdVWknxT0O1nXSPFALPqJNa7vpeQFr2MM7aPfhCGaL1Bc3-LujqIoHGgNmIYDjgio/s1600/efek-gambar-membesar-zoom-in.png)
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 :)
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
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
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
Berikut Cara Membuat Efek Gambar Membesar Kedalam [Zoom In] Dengan CSS3
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
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
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
dengan adanya efek zoom ini maka gambar postingan bisa lebih besar dan jelas ya buk, sehingga pengunjung lebih mudah melihat gambar nya :)
BalasHapusyups betul sekali mbak Wahyu dengan catatan resolusi gambar juga diperhatikan :)
Hapusnice info mas
BalasHapusumpan balik ya mas :D