CSS Image Gallery

What is a CSS Image Gallery?

A CSS Image Gallery is a collection of images arranged in an organized layout using CSS. It allows you to display multiple images in rows, columns, or responsive grids. CSS can also add borders, spacing, hover effects, shadows, and animations to make image galleries more attractive and interactive.

Why Use a CSS Image Gallery?

Image galleries make it easy to display photos, products, portfolios, travel pictures, and artwork. CSS helps create responsive galleries that automatically adjust to different screen sizes while maintaining a clean and professional appearance.

Basic Image Gallery Syntax

<!DOCTYPE html>
<html>
<head>
<style>

.gallery{
    display:flex;
    gap:10px;
}

.gallery img{
    width:150px;
}

</style>
</head>

<body>

<div class="gallery">

<img src="https://picsum.photos/150/100?1">

<img src="https://picsum.photos/150/100?2">

<img src="https://picsum.photos/150/100?3">

</div>

</body>
</html>

Step 1: Create an Image Gallery

Place multiple images inside a container and use display:flex with the gap property to arrange them in a row with equal spacing.

<!DOCTYPE html>
<html>
<head>
<style>

.gallery{
    display:flex;
    gap:15px;
}

.gallery img{
    width:180px;
    border:2px solid #ddd;
    border-radius:6px;
}

</style>
</head>

<body>

<div class="gallery">

<img src="https://picsum.photos/180/120?1">

<img src="https://picsum.photos/180/120?2">

<img src="https://picsum.photos/180/120?3">

</div>

</body>
</html>

Step 2: Add Hover Effects

CSS transitions and transforms can make images enlarge smoothly when the user moves the mouse over them.

<!DOCTYPE html>
<html>
<head>
<style>

.gallery{
    display:flex;
    gap:15px;
}

.gallery img{
    width:180px;
    transition:.3s;
    border-radius:8px;
}

.gallery img:hover{
    transform:scale(1.1);
}

</style>
</head>

<body>

<div class="gallery">

<img src="https://picsum.photos/180/120?1">

<img src="https://picsum.photos/180/120?2">

<img src="https://picsum.photos/180/120?3">

</div>

</body>
</html>

Responsive Image Gallery Example

Modern websites often use CSS Grid to create responsive image galleries that automatically adjust the number of columns based on the available screen width.

<!DOCTYPE html>
<html>
<head>
<style>

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

.gallery img{
    width:100%;
    border-radius:10px;
    box-shadow:0 3px 8px rgba(0,0,0,.2);
}

</style>
</head>

<body>

<div class="gallery">

<img src="https://picsum.photos/300/200?1">

<img src="https://picsum.photos/300/200?2">

<img src="https://picsum.photos/300/200?3">

<img src="https://picsum.photos/300/200?4">

<img src="https://picsum.photos/300/200?5">

<img src="https://picsum.photos/300/200?6">

</div>

</body>
</html>

Complete CSS Image Gallery Example

<!DOCTYPE html>
<html>
<head>
<style>

body{
    font-family:Arial,sans-serif;
    background:#f5f9ff;
    margin:20px;
}

.gallery{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
}

.gallery img{
    width:100%;
    border-radius:10px;
    box-shadow:0 4px 10px rgba(0,0,0,.2);
    transition:.3s;
}

.gallery img:hover{
    transform:scale(1.05);
    box-shadow:0 8px 18px rgba(0,0,0,.35);
}

</style>
</head>

<body>

<h2>Nature Gallery</h2>

<div class="gallery">

<img src="https://picsum.photos/400/300?1">

<img src="https://picsum.photos/400/300?2">

<img src="https://picsum.photos/400/300?3">

<img src="https://picsum.photos/400/300?4">

<img src="https://picsum.photos/400/300?5">

<img src="https://picsum.photos/400/300?6">

</div>

</body>
</html>

Advantages of CSS Image Gallery

Organized Layout

Neat Display

Images are displayed in a clean and structured way.

Responsive Design

Mobile Friendly

The gallery adapts automatically to different screen sizes.

Interactive Effects

Better Experience

Hover animations make galleries more engaging.

Professional Appearance

Modern Design

Borders, shadows, and spacing improve visual appeal.

Easy Maintenance

Reusable CSS

The same gallery styles can be applied to many images.

Common Mistakes

Beginners often use images with different sizes, forget responsive layouts, apply excessive hover effects, or omit spacing between images, making the gallery appear unorganized.

<!DOCTYPE html>
<html>
<head>
<style>

/* Incorrect */

.gallery img{
    width:200;
}

/* Correct */

.gallery img{
    width:200px;
}

</style>
</head>

<body>

<div class="gallery">

<img src="https://picsum.photos/200/150">

</div>

</body>
</html>

Best Practices

Use images with similar dimensions for a consistent layout.
Use CSS Grid to create responsive image galleries.
Add spacing using the gap property instead of margins.
Use subtle hover effects to improve user experience.
Optimize images to reduce page loading time.
Include descriptive alt text for accessibility.
Use rounded corners and shadows sparingly for a modern design.
Test the gallery on desktop, tablet, and mobile devices.

Web Resources on CSS Image Gallery

1. MDN Web Docs : Image gallery
2. Light Gallery JS.com : Responsive Image Gallery
3. Dev.to : Creating an Interactive Image Gallery with HTML and CSS .

🧪 Test Your CSS Code

Edit the CSS code on the left and click “Run Code” to see the result on the right.

📝 CSS Code

👁️ Preview (HTML rendered with your CSS)

Click “Run Code” to see the result here.