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

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

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

<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 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

/* (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) 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