Filter Tabs Gallery — Free HTML CSS JS Filterable Image Grid Snippet

<div class="gallery-wrap">
  <div class="filter-tabs" role="tablist" aria-label="Gallery filters">
    <button class="filter-tab active" data-filter="all" onclick="filterGallery(this)">All</button>
    <button class="filter-tab" data-filter="nature" onclick="filterGallery(this)">Nature</button>
    <button class="filter-tab" data-filter="city" onclick="filterGallery(this)">City</button>
    <button class="filter-tab" data-filter="people" onclick="filterGallery(this)">People</button>
  </div>
  <div class="gallery-grid" id="galleryGrid">
    <div class="gallery-item" data-category="nature"><div class="thumb thumb-1"></div><span>Forest Trail</span></div>
    <div class="gallery-item" data-category="city"><div class="thumb thumb-2"></div><span>Skyline</span></div>
    <div class="gallery-item" data-category="people"><div class="thumb thumb-3"></div><span>Portrait</span></div>
    <div class="gallery-item" data-category="nature"><div class="thumb thumb-4"></div><span>Mountain Lake</span></div>
    <div class="gallery-item" data-category="city"><div class="thumb thumb-5"></div><span>Night Streets</span></div>
    <div class="gallery-item" data-category="people"><div class="thumb thumb-6"></div><span>Street Style</span></div>
    <div class="gallery-item" data-category="nature"><div class="thumb thumb-7"></div><span>Desert Dunes</span></div>
    <div class="gallery-item" data-category="city"><div class="thumb thumb-8"></div><span>Bridge</span></div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #f8fafc; padding: 24px; display: flex; align-items: center; flex-direction: column; gap: 20px; }

.gallery-wrap { width: 100%; max-width: 720px; margin: 0 auto; }

.filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-tab:hover { border-color: #6366f1; color: #6366f1; }
.filter-tab.active { background: #6366f1; border-color: #6366f1; color: #fff; }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

.gallery-item {
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 1;
  transform: scale(1);
}
.gallery-item.hidden {
  opacity: 0;
  transform: scale(0.85);
  position: absolute;
  pointer-events: none;
  width: 0;
  height: 0;
  overflow: hidden;
}

.thumb {
  aspect-ratio: 1;
  border-radius: 10px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
}
.thumb-1, .thumb-4, .thumb-7 { background: linear-gradient(135deg, #34d399, #10b981); }
.thumb-2, .thumb-5, .thumb-8 { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.thumb-3, .thumb-6 { background: linear-gradient(135deg, #f472b6, #ec4899); }

.gallery-item span { font-size: 12px; color: #475569; font-weight: 500; }

function filterGallery(btn) {
  const filter = btn.dataset.filter;
  document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
  btn.classList.add('active');

  document.querySelectorAll('.gallery-item').forEach(item => {
    const match = filter === 'all' || item.dataset.category === filter;
    item.classList.toggle('hidden', !match);
  });
}