CSS TutorialLesson 36Preview gratis
CSS Image Gallery
Lesson ini bagian dari CSS · Semua level
Ringkasan
Galeri gambar sederhana bisa dibuat dengan menyusun gambar dalam wadah yang memakai flexbox atau grid, sehingga foto tampil rapi dalam baris dan kolom. Jarak antar gambar diatur dengan gap atau margin, dan setiap gambar diberi border serta padding agar menyerupai bingkai foto. Efek hover mempercantik interaksi pada thumbnail galeri.
Poin kunci
- Flexbox atau grid membuat susunan thumbnail galeri yang rapi dan menyesuaikan lebar wadah.
- gap mengatur jarak antar gambar secara seragam.
- border dan padding pada gambar membentuk efek bingkai foto.
- object-fit: cover membuat gambar memotong diri agar seragam tanpa terdistorsi.
- Transisi dan efek hover mempercantik interaksi pada thumbnail.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.