Create a simple responsive image gallery with HTML and CSS

Let’s look at one method to create a great looking and deadly simple to build image gallery for a website using some simple HTML and CSS.

An example of the type of image gallery we will create

For this example we will create a full width image gallery that will fit in the images of different aspect ratios. It will also responsively resize to suit smaller devices making it mobile friendly.

The image gallery responsively resizes on smaller devices making it mobile friendly

Lets start with some basic HTML for the image gallery page.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Image Gallery</title>
<meta name="description" content="Responsive Image Gallery">
<meta name="author" content="Tim Wells">

<style type="text/css">
</style>
</head>
<body>
<div id="gallery">

<img src="images/image-001.jpg">
<img src="images/image-002.jpg">
<img src="images/image-003.jpg">
<img src="images/image-004.jpg">
<img src="images/image-005.jpg">
<img src="images/image-006.jpg">
<img src="images/image-007.jpg">
<img src="images/image-008.jpg">
<img src="images/image-009.jpg">
<img src="images/image-010.jpg">
<img src="images/image-011.jpg">
<img src="images/image-012.jpg">
<img src="images/image-013.jpg">
<img src="images/image-014.jpg">
<img src="images/image-015.jpg">
<img src="images/image-016.jpg">
<img src="images/image-017.jpg">
<img src="images/image-018.jpg">
<img src="images/image-019.jpg">
<img src="images/image-020.jpg">
<img src="images/image-021.jpg">
<img src="images/image-022.jpg">
<img src="images/image-023.jpg">
<img src="images/image-024.jpg">

</div>

</body>
</html>

As you can see, we have a basic HTML structure with a div we have creatively given the id of gallery. Inside that are 24 images I used for this tutorial example. (Those images were downloaded from unsplash for the purpose of this tutorial).

All that’s left now is to add some styling to get it looking right.

In the HTML above I’ve included style tags to keep this simple, but in your case I would suggest putting the CSS into it’s own file and using a link tag to reference it.

<link rel="stylesheet" href="css/styles.css?v=1.0">

Lets start with the gallery element. We will use simple masonry css to split the gallery into columns.

#gallery {
line-height:0;
-webkit-column-count:5; /* split it into 5 columns */
-webkit-column-gap:5px; /* give it a 5px gap between columns */
-moz-column-count:5;
-moz-column-gap:5px;
column-count:5;
column-gap:5px;
}

I’ve included the webkit and moz references here even though these days it’s probably not needed. It doesn’t hurt in case someone does view the page with a much older web browser.

Next we will style the images that show in the gallery.

#gallery img {
width: 100% !important;
height: auto !important;
margin-bottom:5px; /* to match column gap */
}

Notice we added a bottom margin of 5px to each image. This matches the column gap and just helps it look nice and tidy.

At this point (if you’re viewing on a computer) you should have a nice looking image gallery.

But what about mobiles. Five columns on a mobile device might be a bit much. Thankfully it’s simple to deal with by adding in some media queries for screen sizes.

@media (max-width: 1200px) {
#gallery {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}

For screens up to 1200px, let’s reduce the columns to 4.

@media (max-width: 1000px) {
#gallery {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
}

For screens up to 1000px let’s reduce the columns to 3.

@media (max-width: 800px) {
#gallery {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}

For screens up to 800px we’ll make it 2.

@media (max-width: 400px) {
#gallery {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}

and finally for screens up to 400px we will reduce it to 1 column.

That should cover just about everything. If you now resize your browser widow horizontally you should see at each size point it rearranges into those columns, meaning on a small device like a phone it will display nicely and not stick with tiny images across five columns.

And there you have it. A responsive, mobile friendly image gallery.

You can use it as is or you can modify it how you want. It doesn’t have to be full width either. Give the gallery element a width and it will fit to that making it easy to be right aligned or centered within a page.

Lets add one more thing.

Just for fun I am going to make it so that all the images in my gallery show up in black and white, but when you hover over it with the mouse they turn to colour.

Please note: This is extra and I haven’t tested this on mobile as it’s not exactly easy to hover on a mobile device.

For this, we will modify the #gallery img CSS and it’s as simple as adding in a filter style.

filter: grayscale(100%);

As you might be able to guess, this filter style will make the image 100% grayscale.

Now, to make it colour again when we hover on it we will need to add a new CSS style.

#gallery img:hover {
filter:none;
}

Doing this will tell the browser to turn off that grayscale filter when someone hovers over the image.

Like this.

The image under the mouse pointer is colour but the rest are grayscale.

And for bonus points lets add a simple animation to the mix. For this we will make the grayscale to colour transition happen over 2 seconds. So the colour will slowly come in and slowly fade out again when we leave. It’s a simple thing but adds just a little bit of wow factor.

Best off all, it’s as simple as adding one more style to the #gallery img tag.

transition: filter 2s;

With this we’re telling the browser to apply the filter over a 2 second time. If you want to really see this happen you can set this to a larger number like 10 seconds and watch as the colour slowly creeps in and fades out of the images as you hover the mouse over them.

Please note that there are a bunch more filter styles that could be applied as well as other things to help add a little more life into your image gallery.

That’s it. I said it was dead simple and it looked good and it was. Enjoy.

Self taught software developer and photographer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store