ImagesLesson 63Preview gratis
Image Gallery
Lesson ini bagian dari How To · Semua level
Ringkasan
Image gallery menampilkan kumpulan foto dalam tata letak responsif lengkap dengan caption. Overlay gradien di bagian bawah membuat teks tetap terbaca tanpa menutupi seluruh gambar. Galeri seperti ini sering dipakai untuk portofolio, dokumentasi acara, atau katalog produk.
Poin kunci
- CSS Grid dengan auto-fit membuat galeri menyesuaikan lebar layar.
- figure dan figcaption memberi struktur semantik pada gambar dan judulnya.
- Overlay gradien meningkatkan kontras teks di atas foto.
- Efek hover dapat memunculkan caption atau memperbesar gambar.
- Atribut alt tetap wajib meskipun gambar memiliki caption visual.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.