ImagesLesson 94Preview gratis
Image Zoom
Lesson ini bagian dari How To · Semua level
Ringkasan
Image zoom memungkinkan pengguna melihat detail gambar dengan memperbesarnya saat hover atau klik. Efek dasar memakai transform scale di dalam kontainer ber-overflow hidden. Versi yang lebih interaktif mengubah transform-origin mengikuti posisi kursor agar area yang diperbesar sesuai sorotan.
Poin kunci
- transform: scale() memperbesar gambar tanpa mengubah layout.
- overflow: hidden pada kontainer mencegah gambar keluar batas.
- transform-origin menentukan titik pusat perbesaran.
- getBoundingClientRect membantu menghitung posisi kursor relatif terhadap gambar.
- Event mousemove dapat memperbarui transform-origin secara dinamis.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.