CSS Image Gallery

CSS Image Gallery

An image gallery is a collection of images displayed in a clean layout. CSS makes it easy to build galleries using modern layout methods like Grid and Flexbox.

In this lesson, we build a simple, responsive gallery using CSS Grid.

Basic Gallery Layout

A common approach is to wrap images in a container and use Grid to create columns.

<div class="gallery">
  <a href="#" class="item"><img src="img1.jpg" alt="Image 1"></a>
  <a href="#" class="item"><img src="img2.jpg" alt="Image 2"></a>
  <a href="#" class="item"><img src="img3.jpg" alt="Image 3"></a>
  <a href="#" class="item"><img src="img4.jpg" alt="Image 4"></a>
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

Making Images Fit

To avoid stretching and keep a clean look, use width: 100% and display: block. If you want equal-height tiles, use object-fit.

.gallery img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

Optional: equal-height tiles using a fixed height:

.gallery img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

Hover Effects

Hover effects add a nice interactive feel. Use a small scale effect and smooth transitions.

.item {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
}

.item img {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.item:hover img {
  transform: scale(1.03);
  opacity: 0.95;
}

Gallery Cards with Captions

You can add captions under images by wrapping each image in a card layout.

<div class="gallery">
  <div class="card">
    <img src="img1.jpg" alt="Mountains">
    <div class="caption">Mountains</div>
  </div>
  <div class="card">
    <img src="img2.jpg" alt="City">
    <div class="caption">City</div>
  </div>
</div>

.card {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.caption {
  padding: 10px 12px;
  font-size: 14px;
  color: #222;
}

Responsive Tips

• Use minmax() with auto-fill for responsive columns
• Use max-width on the gallery container if needed
• Use object-fit: cover for equal-size thumbnails

Code Challenge

Goal: Build a responsive image gallery with hover effects.

HTML:

<div class="gallery">
  <a href="#" class="item"><img src="1.jpg" alt="Image 1"></a>
  <a href="#" class="item"><img src="2.jpg" alt="Image 2"></a>
  <a href="#" class="item"><img src="3.jpg" alt="Image 3"></a>
  <a href="#" class="item"><img src="4.jpg" alt="Image 4"></a>
  <a href="#" class="item"><img src="5.jpg" alt="Image 5"></a>
  <a href="#" class="item"><img src="6.jpg" alt="Image 6"></a>
</div>

Task:

• Use CSS Grid with responsive columns
• Make images fill their tiles without distortion
• Add a subtle hover effect
• Add spacing between items

Try a Solution:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.item {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #eee;
}

.item img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.item:hover img {
  transform: scale(1.03);
  opacity: 0.95;
}

What’s Next?

Next, you will learn how to use CSS image sprites to improve performance by combining multiple icons into one image.