CSS Image Gallery

Imagine visiting an online art museum. If all the paintings were stacked in one giant heap on the floor, you could not enjoy them. You want them organized: arranged in clean rows, framed beautifully, and spaced out so you can walk through and admire them. A CSS image gallery is that organized art museum. By arranging your images into clean grids, adding spacing, and applying hover effects, you keep your photos structured, responsive, and engaging.

In this page:

The Gallery Grid Concept
Styling Image Cards with Captions
Interactive Hover Zoom Effects
Modern Galleries with Flexbox
Using CSS Object-Fit on Gallery Images

The Gallery Grid Concept

An image gallery organizes visual cards into clean, structured grids. By defining a fluid layout structure and wrapping your images inside styled cards, you can keep your photos aligned cleanly on any screen size.

Note: Always specify the width and height dimensions inside your image cards to prevent layout shifting as images load.

Warning: Avoid setting fixed pixel widths on your gallery columns to prevent horizontal scrolling on mobile screens.

Example: The Gallery Grid Concept

css

<style>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
img {
  width: 100%;
  height: 120px;
}
</style>
<div class="gallery">
  <img src="https://placehold.co/150x120" alt="Photo">
  <img src="https://placehold.co/150x120" alt="Photo">
</div>

Styling Image Cards with Captions

To make your gallery interactive, you can pair your images with styled captions or description texts. Wrapping the image and description in a styled card box makes the information clear to your visitors.

Note: Use semantic figure and figcaption elements to link your images and caption text semantically.

Warning: Make sure your caption text is brief to keep it from cluttering the card layout.

Example: Styling Image Cards with Captions

css

<style>
figure {
  margin: 0;
}
figcaption {
  padding: 8px;
}
</style>
<figure>
  <img src="https://placehold.co/200x120" alt="Photo">
  <figcaption>A brief caption</figcaption>
</figure>

Interactive Hover Zoom Effects

You can add custom hover animations (like a soft zoom effect) to make your image gallery interactive and engaging. By scaling the image slightly and clipping the overflow inside the card container, you create a polished, modern design.

Note: Combine the CSS transform scale() property with transitions to make your zoom animations smooth.

Warning: Always set overflow: hidden on the card container to keep the zooming image from spilling over the card borders.

Example: Interactive Hover Zoom Effects

css

<style>
.card {
  overflow: hidden;
}
.card img {
  transition: transform 0.3s;
}
.card:hover img {
  transform: scale(1.1);
}
</style>
<div class="card">
  <img src="https://placehold.co/200x150" alt="Zooms on hover">
</div>

Modern Galleries with Flexbox

Using Flexbox is the modern, standard way to build responsive image galleries. It allows your image cards to align horizontally and wrap onto new lines automatically, adapting perfectly to any screen size.

Note: Use justify-content: space-around on your flex gallery container to distribute spacing between your cards automatically.

Warning: Apply flex-wrap: wrap to the parent container so cards can move onto new lines on smaller screens.

Example: Modern Galleries with Flexbox

css

<style>
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
img {
  width: 150px;
}
</style>
<div class="gallery">
  <img src="https://placehold.co/150x100" alt="Photo">
  <img src="https://placehold.co/150x100" alt="Photo">
</div>

Using CSS Object-Fit on Gallery Images

If your gallery images have different aspect ratios, they can look misaligned in a grid. You can use the CSS object-fit: cover property to crop and scale your images automatically to fill their containers without distorting.

Note: Always specify a defined height on your image elements when using object-fit: cover.

Warning: The object-fit property only works if the image has a defined width and height, or it will display at its native size.

Example: Using CSS Object-Fit on Gallery Images

css

<style>
img {
  width: 150px;
  height: 150px;
  object-fit: cover;
}
</style>
<img src="https://placehold.co/300x150" alt="Cropped to fit without distortion">

Common Mistakes

Using fixed pixel widths on your gallery columns, causing layout breakages on mobile screens.
Forgetting to set overflow: hidden on the parent container when using hover zoom effects, letting the image spill out.
Omitting width and height dimensions on image elements, which causes slow-loading layout shifts.

Chapter Summary

Align image cards into fluid, responsive grids using Flexbox displays.
Add context to your gallery cards using semantic figure and figcaption elements for captions.
Use object-fit: cover to crop and scale images automatically without distortion, and apply transition hover zoom effects for responsive animations.

Browser Support

Standard image galleries and the object-fit property are natively supported by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Advanced Dropdowns Next Lesson → CSS Image Sprites