Very Simple Responsive Image Gallery (Pure HTML CSS)

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

 

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

 

 

 

PART 1) THE HTML

gallery.html
<div class="gallery">
  <img src="images/PHOTO-1.jpg" title="TITLE 1">
  <img src="images/PHOTO-2.jpg" title="TITLE 2">
  <img src="images/PHOTO-3.jpg" title="TITLE 3">
  <img src="images/PHOTO-4.jpg" title="TITLE 4">
  <img src="images/PHOTO-5.jpg" title="TITLE 5">
  <img src="images/PHOTO-6.jpg" 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

gallery.css
/* (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

gallery.css
/* (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 adjust height as you see fit. Remove height 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 out cover | contain | fill | scale-down and see how the browser resizes images to fit.

 

2C) RESPONSIVE GALLERY

gallery.css
/* (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

gallery.css
/* (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

gallery.css
/* (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

gallery.js
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

This gallery will work on all modern “Grade A” browsers.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Simple HTML CSS Gallery (click to enlarge)

 

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!

1 thought on “Very Simple Responsive Image Gallery (Pure HTML CSS)”

Leave a Comment

Your email address will not be published. Required fields are marked *