创建简单的CSS图像库

Question

目标是创建一个简单且仅使用css的图像/照片库，用户可以单击该库弹出。用户还应该能够在任何地方点击关闭图像。

不依赖于任何类型的脚本，并且使用尽可能少的代码。

Answer 1

我创建了这个简单的css图像/照片库:

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