Cara Mudah Membuat Efek Zoom Pada Gambar

---

Animasi efek zoom biasanya digunakan untuk memperbesar objek gambar secara halus yang ada pada halaman blog atau website ketika cursor atau pointer diarahkan ke sebuah gambar. Gimana sobat blogger tertarik untuk mencobanya ? langsung saja kita simak infonya tentang cara mudah membuat efek zoom pada gambar.

Efek zoom ini dapat memperbesar gambar ketika cursor / pointer diarahkan ke sebuah gambar yang ada di postingan / artikel maka gambar tersebut akan membesar secara otomatis tanpa harus di klik manual dahulu dan akan mengecil kembali jika kursor dipindahkan dari gambar tersebut.

Penggunaan animasi efek zoom pada gambar dapat membantu untuk memudahkan pengunjung agar dapat melihat gambar lebih jelas dan lebih detail pada skala tertentu. Animasi efek zoom juga relatif cukup efektif untuk menambah daya tarik dari tampilan blog kamu.

Animasi efek zoom bisa dapat dibuat dengan kode Javascript dan kode CSS atau bisa juga dikombinasikan antara keduanya sehingga efek animasi yang dihasilkan bisa lebih unik dan menarik. Pada pembahasan artikel kali ini admin hanya membagikan cara pembuatan animasi efek zoom menggunakan kode CSS saja sedangkan untuk penggunaan menggunakan Javascript akan dibahas pada kesempatan yang lain.

Sebagai contoh jika sobat blogger menggunakan PC silakan menggerakan kursor mouse ke arah gambar di atas tulisan ini, pada saat kursor mouse berada pada area gambar tersebut maka secara otomatis objek gambar akan membesar (zoom) secara halus dan ketika mouse keluar dari area objek gambar tersebut maka gambar akan kembali ke ukuran semula dengan transisi yang halus.

Oke, buat sobat blogger yang tertarik untuk memasang animasi efek zoom ini silakan disimak cara pemasangannya di bawah ini.

Informasi Singkat

---

Format Gambar Tipe JPEG
JPEG atau JPG (/ ˈdʒeɪpɛɡ / JAY-peg) adalah metode kompresi lossy yang umum digunakan untuk gambar digital, terutama untuk gambar yang dihasilkan oleh fotografi digital. Tingkat kompresi dapat disesuaikan, memungkinkan pertukaran yang dapat dipilih antara ukuran penyimpanan dan kualitas gambar. JPEG biasanya mencapai kompresi 10: 1 dengan sedikit kehilangan kualitas gambar. Sejak diperkenalkan pada tahun 1992, JPEG telah menjadi standar kompresi gambar yang paling banyak digunakan di dunia, dan format gambar digital yang paling banyak digunakan, dengan beberapa miliar gambar JPEG diproduksi setiap hari pada tahun 2015.

Istilah "JPEG" adalah inisialisme / akronim dari Joint Photographic Experts Group, yang menciptakan standar tersebut pada tahun 1992. Dasar untuk JPEG adalah discrete cosine transform (DCT), teknik kompresi gambar lossy yang pertama kali diusulkan oleh Nasir Ahmed pada tahun 1972. JPEG sebagian besar bertanggung jawab atas penyebaran gambar digital dan foto digital di Internet, dan kemudian media sosial.

Kompresi JPEG digunakan dalam sejumlah format file gambar. JPEG / Exif adalah format gambar yang paling umum digunakan oleh kamera digital dan perangkat pengambilan gambar fotografi lainnya; bersama dengan JPEG / JFIF, ini adalah format yang paling umum untuk menyimpan dan mentransmisikan gambar foto di World Wide Web. Variasi format ini sering tidak dibedakan, dan disebut JPEG.

Jenis media MIME untuk JPEG adalah image / jpeg, kecuali dalam versi Internet Explorer yang lebih lama, yang menyediakan jenis gambar / pjpeg MIME saat mengupload gambar JPEG. File JPEG biasanya memiliki ekstensi nama file .jpg atau .jpeg. JPEG / JFIF mendukung ukuran gambar maksimum 65.535 × 65.535 piksel, karenanya hingga 4 gigapiksel untuk rasio aspek 1: 1. Pada tahun 2000, grup JPEG memperkenalkan format yang dimaksudkan sebagai penerus, JPEG 2000, tetapi tidak dapat menggantikan JPEG asli sebagai standar gambar yang dominan.

---

Sumber : Wikipedia

DAFTAR ISI

1. Cara Pemasangan Kode CSS Pada Blogger
2. Cara Penerapan Animasi Efek Zoom
3. Modifikasi Kode CSS Animasi Efek Zoom

#1 Cara Pemasangan Kode CSS Pada Blogger

Pembuatan efek zoom menggunakan kode CSS ini hanya menggunakan kode syntax transition dan transform kemudian dimasukan kedalam elemen class yang sudah ditentukan. Penggunaannya pada struktur kode HTML bisa dengan mudah diimplementasikan pada elemen class atau langsung pada tag HTML gambar (img).

Kode CSS animasi efek zoom bisa ditaruh di mana saja didalam struktur kode HTML blogger namun secara umum untuk pemasangan kode CSS ini dapat diikuti caranya sebagai berikut.

PERINGATAN

Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya kamu melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka kamu dapat melakukan proses perbaikan dengan cepat dan mudah.

• Silakan login dahulu ke blog kamu.


• Klik tombol Tema untuk masuk ke tema editor.
  
  
  


• Klik tombol Edit Tema untuk menampilkan kode HTML Template Blog.
  
  
  


• Geser scrollbar ke posisi paling bawah.
  
  
  


• Letakan kode dibawah ini tepat diatas kode </body>.
  
  
  
  
  
  
  
  
  
  
  
  .zoom {
  transition: all 0.5s;
  -o-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  }
  .zoom:hover {
  transform: scale(1.2);
  -o-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  }
  
  
  KETERANGAN
  

  • Harap diperhatikan kode CSS di atas hanya bisa digunakan pada struktur kode template blogger dan ditaruh tepat diatas kode ]]></b:skin>, jika ingin ditempatkan pada struktur kode HTML di dalam elemen <Body> atau di dalam kotak widget blogger maka diperlukan elemen tag (<style>).
    
    Contoh jika ditaruh selain kode template skin blogger.
    <style>
    Kode CSS Disini
    </style>
  
  
  • Pada kode :
    transition: all 0.5s;
    Syntax kode untuk transisi animasi untuk semua (all) perubahan yang terjadi selama 0.5 detik. Perubahan elemen dan durasi waktu bisa kamu rubah sesuai dengan kebutuhan.
    
    transform: scale(1.2);
    Syntax kode untuk perubahan skala elemen dari normal menjadi lebih besar sebanyak 1.2 skala. Besarnya skala perubahan elemen bisa kamu rubah sesuai dengan kebutuhan.
  
  
  • Pada kode CSS diatas untuk kode syntax transition dan transform diapit oleh class (.zoom), agar lebih fleksibel silakan sobat sesuaikan sendiri sesuai kebutuhan. Nama elemen class tersebut bisa dirubah untuk diapit oleh ID, tag HTML atau class dengan nama lain sesuai kebutuhan. Mengenai tata cara penggunaannya bisa dilihat pada bab selanjutnya.

#2 Cara Penerapan Animasi Efek Zoom

Cara umum untuk menerapkan kode CSS di atas pada struktur elemen HTML maka secara mudah dapat diletakan pada elemen class, tergantung dari nama elemen yang sudah ditetapkan. Pada contoh penerapan berikut ini secara khusus hanya untuk digunakan pada elemen tag image, sedangkan secara global dapat digunakan untuk semua elemen struktur kode HTML yang terdapat didalam tag elemen <Body>.

Contoh :
Jika digunakan hanya pada elemen class :
<img class="zoom" src="contoh-gambar.jpg"/>

Jika digunakan pada elemen class yang sudah ada :
<img class="post zoom" src="contoh-gambar.jpg"/>

Pada penggabungan elemen class maka penulisan nama class dipisahkan oleh spasi namun masih tetap didalam tanda kutip class.

#3 Modifikasi Kode CSS Animasi Efek Zoom

Banyak cara menuju roma, tentu saja untuk mengaktifkan atau memodifikasi elemen tertentu didalam struktur kode HTML ada ratusan cara yang bisa digunakan. Namun agar lebih mudah dalam proses tutorial admin hanya menunjukan beberapa cara saja.

Mengaktifkan Animasi Efek Zoom Pada Semua Elemen Tag <img>
Cara sederhananya adalah dengan merubah nama elemen class pada kode CSS tersebut, sebagai contoh.

img {
transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
img:hover {
transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
}

Mengaktifkan Animasi Efek Zoom Pada Elemen Class Yang Sudah Ada
Misalkan pada halaman artikel blog yang ingin digunakan animasi efek zoom untuk elemen gambar di dalam artikel blog. Mungkin untuk satu atau dua artikel akan mudah penerapannya atau untuk keseluruhan gambar halaman blog bisa menggunakan cara pertama, namun apabila kamu ingin menerapkan hanya untuk gambar yang ada di dalam artikel blog untuk semua artikel yang kamu miliki tentu akan sangat melelahkan jika menerapkan kode elemen class khusus secara satu persatu.

Cara yang paling mudah adalah dengan memberikan nama spesifik pada class atau tag yang akan menggunakan animasi efek zoom. Adapun caranya adalah dengan mengkombinasikan nama spesifik tag dan nama elemen class pada kode CSS tersebut. Sebagai contoh misalkan nama class yang mengapit halaman artikel menggunakan nama class post maka dalam syntax kode dituliskan nama class dan nama tag image yang dipisahkan oleh spasi.

.post img {
transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.post img:hover {
transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
}

Penggunaan cara kedua ini akan memudahkan dalam penerapan animasi efek zoom secara otomatis untuk semua elemen spesifik yang sudah kamu tentukan. Dalam contoh diatas adalah semua gambar yang diapit / terdapat pada elemen class post.

Baiklah sampai disini admin rasa sudah cukup jelas untuk penjelasan mengenai Cara Mudah Membuat Efek Zoom Pada Gambar, supaya lebih paham mengenai kode CSS kamu dapat mencari referensi lain yang ada di internet atau bisa juga berdiskusi pada kotak komentar di bawah ini.

Demikian artikel blog tentang Cara Mudah Membuat Efek Zoom Pada Gambar terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

blog, blogger, blogspot, code, kode, css, html, javascript, animasi, efek, effect, hover, zoom, cursor, mouse, pointer, img, image, picture, foto, photo, pic, grow, transition, transisi, transform, syntax, simple, easy

Incoming Search Term

Cara menambahkan efek zoom pada gambar artikel blog, membuat gambar membesar otomatis hover mouse cursor, auto zoom hover image, css code for zoom animation, css syntax untuk memperbesar gambar, css code for zoomin effect image, auto zoom on mouse hover, how to make zoom animation effect on image using css code, cara bikin gambar zoom menggunakan css, css memperbesar gambar