Pelajari cara membuat galeri gambar sederhana dan responsif menggunakan HTML dan CSS.

CSS Image Gallery

Galeri gambar digunakan untuk menampilkan koleksi gambar dalam tata letak grid yang menarik. Biasanya digunakan untuk portfolio, toko online, dan galeri foto.

Galeri Gambar Sederhana

<style>
  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
 
  .gallery img {
    width: 100%;
    max-width: 300px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
  }
 
  .gallery img:hover {
    transform: scale(1.05);
  }
</style>
 
<div class="gallery">
  <img src="https://images.unsplash.com/photo-1735909600958-f442498875f9?q=80&w=480" alt="Dhankar Monastery">
  <img src="https://images.unsplash.com/photo-1744479357124-ef43ab9d6a9f?q=80&w=480" alt="Maldives">
  <img src="https://images.unsplash.com/photo-1741462166415-1c5bcbdbbc46?q=80&w=480" alt="Grindelwald">
  <img src="https://images.unsplash.com/photo-1738788175090-2947ee2de6b0?q=80&w=480" alt="Boat">
</div>

Tips:

Gunakan flex-wrap agar galeri tetap rapi di berbagai ukuran layar.
hover:scale-105 memberikan efek interaktif saat pengguna mengarahkan mouse ke gambar.
Kombinasikan dengan media queries untuk membuat galeri yang lebih responsif.

CSS Image Gallery

CSS Image Gallery

Galeri Gambar Sederhana

Tips:

On this page