仅 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>