Image Galleries

Image Galleries

Show many images in an attractive, tidy grid. Use CSS Grid or Flexbox.

Responsive grid with inline-block (old school)

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.gallery-item {
  flex: 1 1 200px;             /* shrink, grow, base 200px */
  max-width: 300px;
}
.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

Card style

<div class="gallery">
  <div class="photo-card">
    <img src="photo1.jpg" alt="Sunset">
    <div class="caption">Sunset Beach</div>
  </div>
</div>

.photo-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}
.photo-card .caption {
  padding: 10px;
  text-align: center;
}

Hover zoom

.gallery-item img {
  transition: transform 0.3s;
}
.gallery-item:hover img {
  transform: scale(1.05);   /* subtle zoom */
}

TL;DR

• Flexbox + wrap = instant responsive gallery.
• Use width: 100% on images so they fill their cards and scale down.
• Add overflow: hidden on cards before zooming.
• Hover-scale for a pretty interactive touch.