CSS AdvancedLesson 63Preview gratis
CSS Image Modal
Lesson ini bagian dari CSS · Semua level
Ringkasan
Modal gambar adalah kotak overlay yang menampilkan foto berukuran besar di atas isi halaman. Dengan CSS saja, ini bisa diwujudkan dengan pseudo-class `:target` yang bereaksi ketika URL halaman menunjuk fragment tertentu. Tombol close cukup berupa tautan yang mengarah ke ID di luar overlay sehingga modal tertutup kembali.
Poin kunci
- Teknik `:target` memanfaatkan fragment URL (#id) untuk membuka overlay
- Overlay menggunakan `position: fixed` dengan `inset: 0` untuk menutupi layar
- `z-index` besar memastikan modal berada di atas konten halaman
- Tombol close adalah tautan ke ID lain sehingga `:target` tidak lagi cocok
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.