ImagesLesson 66Preview gratis
Image Overlay Fade
Lesson ini bagian dari How To · Semua level
Ringkasan
Image overlay fade menampilkan lapisan teks di atas gambar yang muncul perlahan saat kursor diarahkan. Overlay ditempatkan absolut di dalam kontainer gambar, lalu opacity-nya diubah dari 0 ke 1. Efek fade memberi kesan halus dan menjaga gambar tetap bersih saat tidak aktif.
Poin kunci
- Kontainer gambar harus position: relative agar overlay berpatokan padanya.
- Overlay memakai position: absolute dan inset: 0 untuk menutupi gambar.
- opacity: 0 menyembunyikan overlay, lalu opacity: 1 saat hover.
- transition: opacity membuat perubahan terlihat halus.
- Latar semi-transparan membantu teks tetap kontras.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.