w3docs logo
  1. Snippets
  2. CSS
  3. How to Create CSS Gallery Without Using JavaScript

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>
      <a name="picture1"></a>
      <img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
    </div>
    <div>
      <a name="picture2"></a>
      <img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
    </div>
    <div>
      <a name="picture3"></a>
      <img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
    </div>
    <div>
      <a name="picture4"></a>
      <img 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>
          <a name="picture1"></a>
          <img alt="Large house 1" 
               src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
        </div>
        <div>
          <a name="picture2"></a>
          <img alt="Large house 2" 
               src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
        </div>
        <div>
          <a name="picture3"></a>
          <img alt="Large house 3" 
               src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
        </div>
        <div>
          <a name="picture4"></a>
          <img 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.
Do you find this helpful?