Create simple CSS image gallery

Question

The goal is to create a simple and CSS-only image / photo gallery, where the user can click to popup. The user should also be able to click anywhere to close the image.

With no dependencies or any kind of script, and with as less code as possible.

Answer 1

I created this simple css image / photo gallery:

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

.container {
  width: 100%;
  height: 100%;
}

.top {
  display: flex;
  width: 80vw;
  height: 80vh;
  margin-top: 10vh;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10vh;
}

.top ul {
  list-style: none;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: border-box;
}

.top ul li {
  position: relative;
  float: left;
  width: 25%;
  height: 25%;
  overflow: hidden;
}

.top ul li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  content: "";
  color: white;
  opacity: 0.4;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}

.top ul li:hover::before {
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.9);
}

.top ul li img {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.lightbox {
  position: fixed;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
}

.lightbox img {
  max-width: 90%;
  max-height: 80%;
  position: relative;
  top: -100%;
}

.lightbox:target {
  outline: none;
  top: 0;
  opacity: 1;
  pointer-events: auto;
}

.lightbox:target img {
  top: 0;
  top: 50%;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

<div class="container">
  <div class="top">
    <ul>
      <li>
        <a href="#img_13"><img src="https://image.freepik.com/free-photo/desert-and-the-road_426-19314945.jpg"></a>
      </li>
      <li>
        <a href="#img_14"><img src="https://image.freepik.com/free-photo/sunlight-through-the-grass_385-19321333.jpg"></a>
      </li>
      <li>
        <a href="#img_15"><img src="https://image.freepik.com/free-photo/colorful-springtime_385-19321241.jpg"></a>
      </li>
      <li>
        <a href="#img_16"><img src="https://image.freepik.com/free-photo/from-blue-to-brown_426-19320820.jpg"></a>
      </li>
    </ul>
    <a href="#_13" class="lightbox" id="img_13"><img src="https://image.freepik.com/free-photo/desert-and-the-road_426-19314945.jpg"></a>
    <a href="#_14" class="lightbox" id="img_14"><img src="https://image.freepik.com/free-photo/sunlight-through-the-grass_385-19321333.jpg"></a>
    <a href="#_15" class="lightbox" id="img_15"><img src="https://image.freepik.com/free-photo/colorful-springtime_385-19321241.jpg"></a>
    <a href="#_16" class="lightbox" id="img_16"><img src="https://image.freepik.com/free-photo/from-blue-to-brown_426-19320820.jpg"></a>
  </div>
</div>