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:

<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 with the corresponding anchors that relate them with large pictures. By this last step, when clicking on a small picture, it will be scrolled to the corresponding large picture in the block of large pictures.
#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: 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%;
}

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

<!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: 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%;
      }
    </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>
If you want to create an image slider or a slide show, you can find all the useful information here.