MoreLesson 238Preview gratis
Zoom Hover
Lesson ini bagian dari How To · Semua level
Ringkasan
Efek zoom saat hover membuat gambar atau kartu terasa lebih hidup ketika kursor mendekat. Teknik utamanya adalah mengubah transform: scale() dan memberinya transition agar perubahan berjalan halus. Bungkus elemen dengan container ber-overflow: hidden supaya bagian yang membesar tidak keluar dari bingkai.
Poin kunci
- transform: scale(1.1) memperbesar elemen tanpa mengubah aliran layout di sekitarnya.
- transition pada transform membuat animasi zoom halus; durasi 0,2-0,4 detik biasanya cukup.
- overflow: hidden pada container mencegah gambar yang diperbesar meluber.
- transform-origin menentukan titik acuan pembesaran, misalnya center atau top left.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.