Menambahkan efek zoom pada gambar dengan CSS dan jQuery

Ada banyak plugin yang tersedia untuk menambahkan efek khusus pada gambar ketika kursor bergerak di atas gambar (meng-hover gambar). Semua dari plugin tersebut menyertakan banyak kode di halaman web yang mungkin berpengaruh pada kecepatan halaman saat dimuat (lemot). Apabila kamu ingin menggunakan lebih sedikit kode dan menghindari masalah lemot tersebut, skrip efek gambar zoom ini adalah pilihan yang tepat untukmu.

Memperbesar gambar saat di-hover membuat antarmuka pengguna lebih baik dalam segala aplikasi web. Kamu dapat dengan mudah menambahkan efek zoom pada gambar dengan CSS dan jQuery. Dalam tutorial ini, saya akan memberi cara sederhana dan kode singkat untuk menambahkan efek zoom pada gambar menggunakan CSS dan jQuery.

Kode CSS

Dalam CSS berikut ini, saya menetapkan style untuk 2 class (.zoom dan .transisi). Style untuk class zoom ini digunakan pada saat memuat gambar dan class transisi digunakan pada saat mouse meng-hover gambar.

img.zoom {
    width: 350px;
    height: 200px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
}

.transisi {
    -webkit-transform: scale(1.8); 
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
}

Kamu sebaiknya memodifikasi kode CSS di atas sesuai dengan kebutuhan kamu.

Kode JavaScript

Dan yang terakhir sampai pada jQuery. Untuk menggunakan jQuery di halaman web, file library jQuery perlu dimasukkan dulu.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Kita akan menggunakan event jQuery hover untuk menambah atau menghapus class transisi berdasarkan pada mouse yang meng-hover gambar.

<script>
$(document).ready(function(){
    $('.zoom').hover(function() {
        $(this).addClass('transisi');
    }, function() {
        $(this).removeClass('transisi');
    });
});  
</script>

Kode HTML

Tambahkan class zoom ke gambar di mana kamu ingin menambahkan efek zoom saat gambar di-hover.

<img src="kamera.jpeg" class="zoom"/>

Apa yang kita lakukan pada dasarnya adalah menambahkan class transisi untuk element gambar saat gambar di-hover dan menghapusnya ketika cursor mouse tidak meng-hover gambar. Class transisi memberi skala pada gambar yang berkaitan dengan kode CSS.

Kode jQuery akan mencari setiap element yang memiliki class zoom, sehingga dengan menggunakan efek ini kamu dapat memiliki banyak gambar pada halaman.