html - 仅 CSS 带有缩略图弹出窗口的图像
问题描述
我需要一个仅 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>
任何帮助或建议将不胜感激。
谢谢
解决方案
看这个。希望它可以帮助你。
#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>
推荐阅读
- java - 如何忽略与嵌入引号交互的字符串中的单引号?
- java - 如何在每次点击后添加暂停/等待间隔?
- java - 无法使用 spring 和 java 7 启动 mule
- java - 具有简单域模型的 LazyInitializationException (Spring Boot/JPA)
- excel - VBA Excel 函数 - 无效的限定符
- php - 此路由不支持 GET 方法(laravel 上的重定向问题)
- extjs - 如何在 ExtJS 中应用暗模式主题
- reactjs - 输入 FormData reactjs 钩子
- python - 它可以更干净或/和更少符合相同的功能吗?
- python - 如何加快 Python 中的嵌套 for?