Selasa, 10 Desember 2013

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

Membuat Efek Gambar Membesar Kedalam [Zoom In] Dengan CSS3

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:
Efek Gambar Zoom In
Efek Gambar Membesar Kedalam
Efek Gambar Membesar Kedalam

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="http://3.bp.blogspot.com/-CQv8z3Z-TO0/UqVfYFIP-uI/AAAAAAAAB9k/DbNR54nIDfE/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

Membuat Efek Gambar Membesar Kedalam [Zoom In] Dengan CSS3 Rating: 4.5 Diposkan Oleh: ana sriwahyuni

5 komentar:

  1. dengan adanya efek zoom ini maka gambar postingan bisa lebih besar dan jelas ya buk, sehingga pengunjung lebih mudah melihat gambar nya :)

    BalasHapus
    Balasan
    1. yups betul sekali mbak Wahyu dengan catatan resolusi gambar juga diperhatikan :)

      Hapus
  2. nice info mas
    umpan balik ya mas :D

    BalasHapus
  3. Thanks banget tutorialnya mas

    BalasHapus
  4. Thanks banget tutornya mas

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia