← Back to Chapters

CSS Image Gallery

?️ CSS Image Gallery

⚡ Quick Overview

A CSS Image Gallery is a layout where multiple images are displayed in a clean, organized grid or flexible row/column arrangement using HTML and CSS only. With Flexbox or Grid, you can easily create responsive galleries that look good on mobiles, tablets, and large screens.

You can enhance the gallery with hover effects, spacing, rounded corners, and smooth transitions to make it feel more interactive and modern.

? Key Concepts

  • Flexbox / Grid: Used to arrange images in rows and wrap them automatically.
  • Responsive widths: Images adjust or wrap on smaller screens instead of overflowing.
  • Gap / margin: Adds space between images so they don’t stick together.
  • object-fit: cover; Ensures images fill their boxes without stretching.
  • Hover effects: Adds interactivity using transform and transition.

? Syntax & Layout Theory

The gallery usually has a wrapper (like .gallery) that uses Flexbox or Grid. Each <img> inside gets a fixed size, rounded corners, and a hover effect.

? View CSS Gallery Layout 
/* Flexbox-based responsive image gallery */
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}

/* Individual gallery images with fixed size */
.gallery img {
width: 200px;
height: 150px;
object-fit: cover;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Simple hover zoom effect */
.gallery img:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(15, 23, 42, 0.25);
}

Here, flex-wrap: wrap; lets images move to a new line when there isn’t enough horizontal space. object-fit: cover; makes sure each image fills its box without being distorted.

? HTML Structure Example

The HTML is just a wrapper <div class="gallery"> that contains multiple <img> tags.

? View HTML Markup 
<!-- Basic image gallery markup -->
<div class="gallery">
<img src="https://via.placeholder.com/200x150" alt="Gallery image 1">
<img src="https://via.placeholder.com/200x150" alt="Gallery image 2">
<img src="https://via.placeholder.com/200x150" alt="Gallery image 3">
<img src="https://via.placeholder.com/200x150" alt="Gallery image 4">
<img src="https://via.placeholder.com/200x150" alt="Gallery image 5">
</div>

? Live Output & Explanation

?️ Live Image Gallery Preview

Below is a simple gallery using real images. Resize the browser window to see how the images wrap automatically because of Flexbox and flex-wrap: wrap;.

Nature scene 1 Nature scene 2 Nature scene 3 Nature scene 4 Nature scene 5

Each image has the same width and height, so the gallery looks uniform. When the screen is narrow, images move to the next line instead of overflowing horizontally.

? Gallery Properties

Common CSS properties you’ll use when building an image gallery:

Property Description Example Value
display Sets the gallery layout. flex, grid
flex-wrap Allows wrapping of images to new lines. wrap
gap Space between images. 10px
object-fit Makes image fit its box nicely. cover
transition Controls animation smoothness on hover. transform 0.3s ease
border-radius Adds rounded corners to images. 8px

? Tips & Best Practices

  • Prefer Flexbox or Grid for dynamic, responsive galleries.
  • Use object-fit: cover so all images look uniform even if their original sizes differ.
  • Use placeholder images (like via.placeholder.com or dummyimage.com) during development.
  • Add interactivity with transition and :hover for zoom or shadow effects.
  • Always include descriptive alt text for accessibility and SEO.

? Try It Yourself

  1. Create a gallery of 6 images arranged in a 3x2 layout using Flexbox or Grid.
  2. Add a hover zoom effect using transform: scale(1.1); plus a smooth transition.
  3. Use border and box-shadow to style each image as a neat card.
  4. Make the gallery responsive so it becomes 2 images per row on tablets and 1 image per row on mobile.