CSS Image Gallery
When a web page shows a collection of images in an organized, and often responsive, way, that is a CSS image gallery.
Its HTML has two levels:
- An outer container element wrapping the whole gallery (like a
<div>as the gallery wrapper). - Inside it, one more container element per image (like a
<div>per gallery item), holding the<img>tag and possibly a description.
Example
A basic image gallery built with flexbox, in HTML and CSS:
Prompt
Create a CSS image gallery using flexbox. The gallery container (div.gallery) uses display: flex and flex-wrap: wrap with justify-content: flex-start. Each gallery item (div.gallery-item) has margin 5px, border 1px solid #ccc, and width 180px. On hover the border changes to 1px solid #777. Images inside gallery items have width 100% and height auto. The description div (div.desc) has padding 15px and text-align center. Include four images: Cinque Terre (img_5terre.jpg), Forest (img_forest.jpg), Northern Lights (img_lights.jpg), and Mountains (img_mountains.jpg). Each image is wrapped in an anchor tag with target="_blank" and has width="600" height="400" attributes. Add a description text below each image.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Image Gallery</title>
<style>
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
div.gallery-item {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
}
div.gallery-item:hover {
border: 1px solid #777;
}
div.gallery-item img {
width: 100%;
height: auto;
}
div.gallery-item div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Image Gallery</h2>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>
CSS Responsive Image Gallery
With CSS media queries, the images re-arrange themselves according to the screen size:
- On screens wider than 768px - four images appear side by side
- On screens narrower than 768px - two images appear side by side
- On screens narrower than 480px - the images stack vertically (width: 100%)
Example
Prompt
Create a responsive CSS image gallery using flexbox and media queries. The gallery container (div.gallery) uses display: flex and flex-wrap: wrap with justify-content: flex-start. Each gallery item (div.gallery-item) has margin 5px, border 1px solid #ccc, and uses percentage widths that change based on screen size. On hover the border changes to 1px solid #777. Images inside gallery items have width 100% and height auto. The description div (div.desc) has padding 15px and text-align center. Use media queries so that: if the screen is larger than 768px wide, show four images side by side (each item about 24%); if the screen is smaller than 768px, show two images side by side (each item about 48%); if the screen is smaller than 480px, stack images vertically (each item 100% width). Include four images: Cinque Terre (img_5terre.jpg), Forest (img_forest.jpg), Northern Lights (img_lights.jpg), and Mountains (img_mountains.jpg). Each image is wrapped in an anchor tag with target="_blank" and has width="600" height="400" attributes.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CSS Image Gallery</title>
<style>
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
div.gallery-item {
margin: 5px;
border: 1px solid #ccc;
width: 24%;
}
div.gallery-item:hover {
border: 1px solid #777;
}
div.gallery-item img {
width: 100%;
height: auto;
}
div.gallery-item div.desc {
padding: 15px;
text-align: center;
}
@media screen and (max-width: 768px) {
div.gallery-item {
width: 48%;
}
}
@media screen and (max-width: 480px) {
div.gallery-item {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect!</h4>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Mountains</div>
</div>
</div>
<p>Here we use media queries to re-arrange the images on different screen sizes:</p>
<ul>
<li>If screen is larger than 768px wide - show four images side by side</li>
<li>If screen is smaller than 768px - show two images side by side</li>
<li>If screens is smaller than 480px - stack the images vertically (100%)</li>
</ul>
<p><strong>Tip:</strong> You will learn more about media queries later in our CSS Tutorial.</p>
</body>
</html>