Bikin Galeri Masonry Keren dengan Efek Zoom (Tailwind CSS)

Pernah lihat galeri foto yang tampilannya rapi, tapi nggak monoton—gambar disusun kayak dinding bata (masonry) dan pas di-hover ada efek zoom yang halus? Ternyata gampang banget bikinnya pakai Tailwind CSS.

Di tulisan ini, saya bikin galeri responsif pakai layout masonry plus efek zoom pas kursor diarahkan ke gambar. Yuk langsung coba!

1. Struktur HTML Galeri

Cukup beberapa div dengan class Tailwind, galeri sudah jadi:

<div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-4 p-4">
  <div class="mb-4 overflow-hidden rounded-lg">
    <img 
      src="https://picsum.photos/500/700.webp" 
      alt="Image 1" 
      class="w-full hover:scale-110 transition-transform duration-300 ease-in-out">
  </div>
  <div class="mb-4 overflow-hidden rounded-lg">
    <img 
      src="https://picsum.photos/500/500.webp" 
      alt="Image 2" 
      class="w-full hover:scale-110 transition-transform duration-300 ease-in-out">
  </div>
  <!-- Tambahkan gambar lain sesuai kebutuhan -->
</div>

2. Apa arti class?

• columns-1 sm:columns-2 md:columns-3 lg:columns-4 → jumlah kolom berubah sesuai ukuran layar (1 di HP, 2 di tablet, dst).
• gap-4 → jarak antar kolom.
• p-4 → kasih padding biar galeri nggak mepet ke pinggir.
• mb-4 → jarak antar item.
• overflow-hidden + rounded-lg → bikin gambar rapi, ujung melengkung, dan zoom-nya nggak keluar batas.
• hover:scale-110 + transition-transform duration-300 ease-in-out → bikin efek zoom halus pas di-hover.

3. Bisa diutak-atik

• Jumlah kolom: ubah columns- sesuai kebutuhan. Misalnya, mau 5 kolom di layar besar, pakai xl:columns-5.
• Zoom lebih besar: ganti hover:scale-110 jadi hover:scale-125 atau hover:scale-150.
• Transisi lebih kalem: ganti duration-300 jadi duration-500.

4. Kapan cocok dipakai?

• Galeri foto pribadi atau portofolio.
• Showcase produk di toko online.
• Landing page yang butuh tampilan visual interaktif.

5. Penutup

Dengan Tailwind, bikin galeri masonry + efek zoom tuh cuma butuh beberapa baris HTML. Hasilnya responsif, interaktif, dan enak dilihat di semua ukuran layar.

Coba terapkan di project kamu, terus utak-atik biar sesuai gaya desain masing-masing.