How to Create CSS Gallery Without Using JavaScript

It turns out it is possible to create a pure CSS gallery without using Javascript. In this article, we are going to show you how to do that with only HTML and CSS.

Create HTML

As we know, a gallery consists of 2 blocks of pictures. The first one contains small images (thumbnails), the other one large pictures. If you want to create a simple gallery, you must define unique anchors (picture1, picture2, picture3, picture4, picture5).

The code must look like the following:

How to create an ul (unordered lists) for Gallery with HTML?

<div id="gallery">
  <ul id="navigation">
    <li>
      <a href="#picture1">
        <img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" />
      </a>
    </li>
    <li>
      <a href="#picture2">
        <img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" />
      </a>
    </li>
    <li>
      <a href="#picture3">
        <img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" />
      </a>
    </li>
    <li>
      <a href="#picture4">
        <img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" />
      </a>
    </li>
  </ul>
  <div id="full-picture">
    <div>
      <img id="picture1" alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
    </div>
    <div>
      <img id="picture2" alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
    </div>
    <div>
      <img id="picture3" alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
    </div>
    <div>
      <img id="picture4" alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" />
    </div>
  </div>
</div>

Add CSS

Set the width of the block of large images equal to the width of one of the large images.
Define the overflow property to its “hidden” value for the block of large images.
Place the pictures with anchor links (<a> elements) inside of this block.
Give the links to the small pictures corresponding anchor fragments that match the IDs of the large pictures. When a thumbnail is clicked, the browser applies the :target pseudo-class to the matching large image, allowing CSS to show it while hiding the others.
Add CSS rules to hide all large images by default, and use the :target pseudo-class to display the active image.

How to create styles for Gallery with CSS?

#gallery {
  width: 600px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 100px auto;
  border: 2px solid #003C72;
}

#navigation {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
}

#navigation li {
  padding: 0;
  margin: 5px 0 20px;
}

#navigation li a img {
  display: block;
  border: none;
}

#navigation li a {
  display: block;
}

#full-picture {
  width: 600px;
  height: 375px;
  overflow: hidden;
  float: left;
}

#full-picture img {
  width: 100%;
  display: none;
}

#full-picture img:target {
  display: block;
}

Now our gallery is created! Let’s see the complete code.

Example of creating a gallery with HTML and CSS:

How to create a simple CSS gallery without using JavaScript

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #gallery {
        width: 600px;
        overflow: hidden;
        position: relative;
        z-index: 1;
        margin: 100px auto;
        border: 2px solid #003C72;
      }
      #navigation {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
      }
      #navigation li {
        padding: 0;
        margin: 5px 0 20px;
      }
      #navigation li a img {
        display: block;
        border: none;
      }
      #navigation li a {
        display: block;
      }
      #full-picture {
        width: 600px;
        height: 375px;
        overflow: hidden;
        float: left;
      }
      #full-picture img {
        width: 100%;
        display: none;
      }
      #full-picture img:target {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="gallery">
      <ul id="navigation">
        <li>
          <a href="#picture1">
            <img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture2">
            <img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture3">
            <img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture4">
            <img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" />
          </a>
        </li>
      </ul>
      <div id="full-picture">
        <div>
          <img id="picture1" alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
        </div>
        <div>
          <img id="picture2" alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
        </div>
        <div>
          <img id="picture3" alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
        </div>
        <div>
          <img id="picture4" alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" />
        </div>
      </div>
    </div>
  </body>
</html>

Try it Yourself »

Tip

If you want to create an image slider or a slide show, you can find all the useful information here.