仅 CSS 带有缩略图的图像弹出

Question

>我需要一个仅限CSS的解决方案，该解决方案使图像在单击时能够在同一页面上放大，并带有弹出框和淡出的背景。

我有一个主图像的主布局设置，然后是下面的缩略图。当用户单击主图像或任何缩略图时，我希望弹出框显示显示更大的图像大小。

然后，当用户单击图像并出现弹出窗口时，我需要在角落里打叉，然后关闭弹出框。

这是一个例子：https://www.ebay.co.uk/itm/352338537173?ViewItem=&item=352338537173

尽管上面的示例还将缩略图更改为我不想要的主图像。因此，这是一个更简单的版本，当单击缩略图图像时，它们只会放大与主图像相同的大小。

到目前为止，我所做的代码的主要布局如下：

.CSS

#images {
width: 100%%;
margin: 0 auto;
max-width: 500px;
}
#main-image {
width: 100%;
}
#main-image img { 
display: block;
max-width: 100%;
height: auto;
}
#thumbnail-images {
width: 100%;
margin: 0;
overflow: auto;
padding: 15px 0;
}
#thumbnail-images ul {
float: left;
margin-bottom: 0;
white-space: nowrap;
list-style: none;
padding: 0;
}
#thumbnail-images li {
width: 20%;
margin: 7px;
text-align: center;
float: left;
display: block;
}
#thumbnail-images li img {
width: 100%;
position: relative;
cursor: pointer;
margin-bottom: 15px;
}

.HTML

<div id="images">
<div id="main-image"><a href="https://i.vimeocdn.com/video/673111786_960.jpg"><img src="https://i.vimeocdn.com/video/673111786_960.jpg" /></a></div>
<div id="thumbnail-images">
<ul>
<li><a href="https://i.vimeocdn.com/video/673111786_960.jpg"><img src="https://i.vimeocdn.com/video/673111786_960.jpg" /></a></li>
<li><a href="https://i.vimeocdn.com/video/673111786_960.jpg"><img src="https://i.vimeocdn.com/video/673111786_960.jpg" /></a></li>
<li><a href="https://i.vimeocdn.com/video/673111786_960.jpg"><img src="https://i.vimeocdn.com/video/673111786_960.jpg" /></a></li>
<li><a href="https://i.vimeocdn.com/video/673111786_960.jpg"><img src="https://i.vimeocdn.com/video/673111786_960.jpg" /></a></li>
</ul>
</div>
</div>

任何帮助或建议将不胜感激。

谢谢

Answer 1

看看这个。希望对您有所帮助。

#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;
float: left;
}
#navigation li {
padding: 0;
margin: 0;
float: left;
clear: both;
}
#navigation li a img {
display: block;
border: none;
}
#navigation li a {
display: block;
}
#full-picture {
width: 500px;
height: 375px;
overflow: hidden;
float: left;
}

<div id="gallery">
<ul id="navigation">
<li><a href="#pic1"><img alt="" src="https://basicuse.net//content/download/1422/6814/file/nature1.jpg" /></a></li>
<li><a href="#pic2"><img alt="" src="https://basicuse.net//content/download/1423/6816/file/nature2.jpg" /></a></li>
<li><a href="#pic3"><img alt="" src="https://basicuse.net//content/download/1424/6818/file/nature3.jpg" /></a></li>
<li><a href="#pic4"><img alt="" src="https://basicuse.net//content/download/1425/6820/file/nature4.jpg" /></a></li>
<li><a href="#pic5"><img alt="" src="https://basicuse.net//content/download/1426/6822/file/nature5.jpg" /></a></li>
</ul>
<div id="full-picture">
<div><a name="pic1"></a><img alt="" src="https://basicuse.net//content/download/1413/6796/file/nature1.jpg" /></div>
<div><a name="pic2"></a><img alt="" src="https://basicuse.net//content/download/1414/6798/file/nature2.jpg" /></div>
<div><a name="pic3"></a><img alt="" src="https://basicuse.net//content/download/1416/6802/file/nature3.jpg" /></div>
<div><a name="pic4"></a><img alt="" src="https://basicuse.net//content/download/1417/6804/file/nature4.jpg" /></div>
<div><a name="pic5"></a><img alt="" src="https://basicuse.net//content/download/1418/6806/file/nature5.jpg" /></div>
</div>
</div>