MoreLesson 185Preview gratis
Overlay Effect
Lesson ini bagian dari How To · Semua level
Ringkasan
Pelajaran ini membahas overlay, yaitu lapisan transparan berisi teks atau tombol yang muncul di atas gambar atau kartu. Overlay biasanya diposisikan absolut menutupi kontainer dan disembunyikan dengan opacity sebelum ditampilkan saat hover atau fokus. Kontras teks dan aksesibilitas konten di dalam overlay perlu diperhatikan.
Poin kunci
- Kontainer overlay harus position: relative dan memiliki overflow yang sesuai
- Lapisan overlay menggunakan position: absolute dengan inset: 0 agar menutupi seluruh area
- Gunakan opacity dan transition untuk memunculkan overlay secara halus
- Tampilkan overlay pada :hover dan :focus-within agar dapat diakses keyboard
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.