Cara membuat efek zoom hover pada elementor – pupungbp

Terakhir diperbarui: 2 September 2023 | Waktu Membaca: 2 menit

Efek zoom adalah efek paling populer pada desain antarmuka pengguna saat Anda melayang di atas gambar tautan. Anda dapat melihatnya secara langsung di demo Pracia Webkit.

Seberapa keren itu? Di Elementor, Anda dapat membuatnya dengan mudah tanpa perlu pengkodean tambahan. Saya akan menunjukkan cara membuatnya.

Versi yang lebih sederhana

Inilah struktur wadah yang akan kita gunakan untuk efek zoom:

Mari kita buat di Elementor:

1. Tambahkan wadah kosong.
   
   Mari kita mempersempit wadah menjadi sekitar 250px.
   
2. Berikan wadah Overflow: Tersembunyi Milik.
   
3. Tambahkan perbatasan tipis dan nol bantalan di semua sisi wadah sehingga elemen di dalamnya akan menyentuh tepi wadah.
   
4. Tambahkan gambar di dalam wadah, dan berikan animasi hover: tumbuh.
   
5. Itu saja! Inilah contoh yang berfungsi.