Welcome to a tutorial on how to create a simple responsive image gallery with pure HTML and CSS. Yes, there are plenty of such “image galleries” all over the Internet. So here’s one that is fuss-free, CSS-only, and does not use any third-party frameworks – Read on!
ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
TLDR – QUICK SLIDES
Fullscreen Mode – Click Here
TABLE OF CONTENTS
DOWNLOAD & DEMO
Firstly, here is the download link to the example code as promised.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
EXAMPLE CODE DOWNLOAD
Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
GALLERY DEMO






HTML CSS IMAGE GALLERY
All right, let us now get into some details on how the image gallery works.
PART 1) THE HTML
<div class="gallery">
<img src="images/PHOTO-1.jpg" title="TITLE 1">
<img src="images/PHOTO-2.jpeg" title="TITLE 2">
<img src="images/PHOTO-3.webp" title="TITLE 3">
<img src="images/PHOTO-4.gif" title="TITLE 4">
<img src="images/PHOTO-5.png" title="TITLE 5">
<img src="images/PHOTO-6.bmp" title="TITLE 6">
</div>
Don’t think this needs a lot of explanation. We create a <div class="gallery">
container and sandwich the images <img>
inside.
P.S. The title
will show the caption on mouse hover, and it is optional.
PART 2) THE CSS
2A) GALLERY CONTAINER
/* (A) WHOLE PAGE */
* { box-sizing: border-box; }
body { background: #eee; }
/* (B) GALLERY WRAPPER */
.gallery {
/* (B1) GRID LAYOUT - 3 IMAGES PER ROW */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
/* (B2) OPTIONAL WIDTH RESTRICT */
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
}
This may look confusing for beginners, but the only functional parts are:
.gallery { display: grid }
will turn<div class="gallery">
in a grid layout. Captain Obvious at your service.grid-template-columns: repeat(3, 1fr)
3 images per row by default.grid-gap
spacing between the images.
Yep, that’s all. The rest are pretty much cosmetics.
2B) GALLERY IMAGES
/* (C) GALLERY IMAGES */
.gallery img {
/* (C1) DIMENSION */
width: 100%;
height: 150px; /* optional */
padding: 10px;
/* (C2) COLORS */
border: 1px solid #ddd;
background: #fff;
/* (C3) IMAGE RESIZE */
/* cover | contain | fill | scale-down */
object-fit: contain;
position: relative;
}
Next, this section deals with the individual images.
- (C1) The dimensions of the images. Leave
width: 100%
be, and adjustheight
as you see fit. Removeheight
to let the browser resize images automatically. - (C2) The border and background color of the “photo frame”.
- (C3)
object-fit
deals with the image resize algorithm. As above, try outcover | contain | fill | scale-down
and see how the browser resizes images to fit.
2C) RESPONSIVE GALLERY
/* (D) ON SMALL SCREENS - 2 IMAGES PER ROW */
@media only screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
Simple responsive design. This will change to a “2 images per row” layout on smaller screens.
2D) ENLARGE ON HOVER
/* (E) OPTIONAL ZOOM ON HOVER */
.gallery img:hover {
z-index: 9;
transform: scale(1.3);
/* linear | ease | ease-in | ease-out | ease-in-out */
transition: transform ease 0.5s;
}
Finally, this is an optional “gimmick” to enlarge the image on mouse hover. Change transform: scale(1.3)
to your own liking.
EXTRA BITS & LINKS
That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.
EXTRA) CLICK TO SHOW IN FULLSCREEN
CSS FULLSCREEN IMAGE
/* (F) FULLSCREEN MODE */
.gallery img.full {
position: fixed;
top: 0; left: 0; z-index: 999;
width: 100vw; height: 100vh;
object-fit: fit;
background: rgba(0, 0, 0, 0.7);
}
.gallery img.full:hover {
z-index: 999;
transform: none;
}
We can play with CSS to set an image into “fullscreen mode”; An image with this .full
CSS class will be set to cover the entire window.
JAVASCRIPT TOGGLE CSS CLASS
window.onload = () => {
for (let i of document.querySelectorAll(".gallery img")) {
i.onclick = () => i.classList.toggle("full");
}
};
Rather than manually setting <img onclick="TOGGLE .FULL CSS CLASS">
on every image, the smart way is to use the “dreaded Javascript” to do it automatically.
P.S. If you don’t need “click to show fullscreen”, just remove these parts.
COMPATIBILITY CHECKS
- Grid Layout – CanIUse
- Object Fit – CanIUse
- Transform – CanIUse
This gallery will work on all modern “Grade A” browsers.
LINKS & REFERENCES
- Very Simple PHP Gallery – Code Boxx
- Example On CodePen – Simple Image Gallery
INFOGRAPHIC CHEAT SHEET

THE END
Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!
Thanks for taking the time to write/share this with us.
i get it very helpful thank you keep up it!!
Needed to present 8 pics, and can no longer ignore mobile. This is just what I needed, though I got rid of the grid for desktop. Thanks!
You are fantastic