仅CSS图片/缩略图库

rqmkfv5c 于 2023-02-01 发布在其他

关注(0)|答案(3)|浏览(162)

虽然我看过很多只使用CSS的脚本，但我不知道如何在默认情况下显示第一张图片，而不是在第一次打开时有一个空格。这必须是只使用CSS-JavaScript和其他"活动内容"是不允许的。请建议。

.container {
  width: 600px;
  position: relative;
}

.gallerycontainer {
  position: relative;
  height: 600px;
  /*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img {
  border: 1px solid white;
  margin: 0 5px 5px 0;
}

.thumbnail:hover {
  background-color: transparent;
}

.thumbnail:hover img {
  border: none;
}

.thumbnail span {
  /*CSS for enlarged image*/
  position: absolute;
  background-color: lightyellow;
  padding: 5px;
  left: -1000px;
  border: none;
  visibility: hidden;
  color: black;
  text-decoration: none;
}

.thumbnail span img {
  /*CSS for enlarged image*/
  border-width: 0;
  padding: 2px;
}

.thumbnail:hover span {
  /*CSS for enlarged image*/
  visibility: visible;
  top: 0;
  left: 150px;
  /*position where enlarged image should offset horizontally */
  z-index: 50;
}

<div class="gallerycontainer">
  <div class="container">
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span>
    </a>
    <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500" width="60" /><span><img src="http://www.placehold.it/500" width="500" /></span><br />
    </a>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/46479296/css-only-picture-thumbnail-gallery

3条答案

按热度按时间

dpiehjr41#

.container:not(:hover) .thumbnail:first-child img + span {
    visibility: visible;
    left: 150px;
}
.container {
    width: 134px;
}

......应该做的。
如果.container上的width:134px;有问题，请向其添加margin-right以补偿缺少的宽度。
要解决较短图像上的悬停问题和缩略图跳跃问题，您可能需要添加更多行，从而导致：

.container:not(:hover) .thumbnail:first-child img + span {
    visibility: visible;
    left: 150px;
}
.container {
    width: 134px;
    display: flex;
    flex-wrap: wrap;
}
.thumbnail:hover > img {
    border: 1px solid transparent;
}

更新片段：
一个二个一个一个

- 注意：**此代码需要在CSS结束时加载/应用。或者修改当前CSS中的属性。

赞(0）回复(0）举报 2023-02-01

vyswwuz22#

从头开始重建

- 兼容性：**已在Chrome、Firefox、IE11和Edge中测试。将适用于所有非老式浏览器。

下面是我们正在构建的内容的完整片段!

一些简单的transitions就能把一切都理顺。

.gallery {
  columns: 2;
  column-gap: 0;
  width: 300px;
  margin: 20px 0 0 20px;
  transition: width .1s;
}

.gallery>.thumb {
  vertical-align: top;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 10px 10px;
  cursor: pointer;
}

.gallery>.full {
  position: fixed;
  top: 20px;
  left: 340px;
  pointer-events: none;
  opacity: 0;
  max-width: 60vw;
  transition: opacity .3s, width .3s, left .1s;
}

/* Hide first image when other thumbnail is hovered*/

.gallery:hover>.full:nth-child(2) {
  opacity: 0;
}

/*
1.No thumbnail is hovered:
  Show first image
2.Thumbnail is hovered
  Show image directly after hovered thumbnail
3.First thumbnail is hovered
  Show first image when first thumbnail is hovered
*/

.gallery>.full:nth-child(2),
.gallery>.thumb:hover+img,
.gallery>.thumb:first-child:hover+.full {
  opacity: 1;
}

@media only screen and (max-width: 925px) {
  .gallery>.full {
    left: 240px;
    transition: left .1s .05s
  }
  .gallery {
    width: 200px;
  }
}

/*Example styles */

body {
  margin: 0;
  background: #001f3f;
}

<div class="gallery">
  <img src="https://via.placeholder.com/500" width="60" class="thumb" />
  <img src="https://via.placeholder.com/500" class="full" />
  <img src="https://via.placeholder.com/400" width="60" class="thumb" />
  <img src="https://via.placeholder.com/400" class="full" />
  <img src="https://via.placeholder.com/700" width="60" class="thumb" />
  <img src="https://via.placeholder.com/700" class="full" />
  <img src="https://via.placeholder.com/400" width="60" class="thumb" />
  <img src="https://via.placeholder.com/400" class="full" />
  <img src="https://via.placeholder.com/600" width="60" class="thumb" />
  <img src="https://via.placeholder.com/600" class="full" />
  <img src="https://via.placeholder.com/800" width="60" class="thumb" />
  <img src="https://via.placeholder.com/800" class="full" />
  <img src="https://via.placeholder.com/900" width="60" class="thumb" />
  <img src="https://via.placeholder.com/900" class="full" />
  <img src="https://via.placeholder.com/400" width="60" class="thumb" />
  <img src="https://via.placeholder.com/400" class="full" />
  <img src="https://via.placeholder.com/700" width="60" class="thumb" />
  <img src="https://via.placeholder.com/700" class="full" />
  <img src="https://via.placeholder.com/400" width="60" class="thumb" />
  <img src="https://via.placeholder.com/400" class="full" />
  <img src="https://via.placeholder.com/600" width="60" class="thumb" />
  <img src="https://via.placeholder.com/600" class="full" />
  <img src="https://via.placeholder.com/700" width="60" class="thumb" />
  <img src="https://via.placeholder.com/700" class="full" />
</div>

HTML

如果您不需要向图像添加任何内容（如文本标题），那么您可以将所需的标记减少到最低限度;一个容器div，每个图片有两个图像，一个小一个大，如下所示：

<div class="gallery">
  <img src="https://via.placeholder.com/700" width="60" class="thumb" />
  <img src="https://via.placeholder.com/700" class="full" />

  <img src="https://via.placeholder.com/700" width="60" class="thumb" />
  <img src="https://via.placeholder.com/700" class="full" />

  <img src="https://via.placeholder.com/700" width="60" class="thumb" />
  <img src="https://via.placeholder.com/700" class="full" />

  <img src="https://via.placeholder.com/700" width="60" class="thumb" />
  <img src="https://via.placeholder.com/700" class="full" />
</div>

(If你需要添加标题文本到全尺寸的图像，然后你可以继续 Package 全尺寸的图像，并适当地改变这里使用的CSS。）

CSS

- 如果未选择任何内容，则显示第一个全尺寸图像：**

.gallery > .full:nth-child(2) {
  opacity: 1;
}

这是some information on nth-child。

- 悬停其它缩略图时隐藏第一个图像：**

.gallery:hover > .full:nth-child(2) {
  opacity: 0;
}

这实际上隐藏了画廊悬停时的第一个完整图像。这覆盖了任何悬停的缩略图。

- 悬停缩略图时，三个选择器显示正确的全尺寸图像：**

.gallery > .full:nth-child(2),
.gallery > .thumb:hover + img,
.gallery > .thumb:first-child:hover + .full{
  opacity: 1;
}

1.始终显示第一个全尺寸图像
1.显示直接位于悬停缩略图之后的全尺寸图像
1.确保第一张图片在其缩略图悬停时显示。这将覆盖图库悬停隐藏选择器。

两列缩略图

- 使用CSS列：**

.gallery  {
  columns: 2;
  column-gap: 0;
  width: 300px;
  margin: 20px 0 0 20px;
}

.gallery > .thumb {
  vertical-align: top;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 10px 10px;
  cursor: pointer;
}

这将显示两列图像，并将它们平均分布在300px的宽度上。100%的宽度被列分为两部分，因此它们是正确的大小。由于box-sizing: border-box，填充被吸收到宽度中。
这是some information on CSS columns和box sizing。

- 在正确位置显示全尺寸图像：**

.gallery > .full {
  position: fixed;
  top: 20px;
  left: 340px;
  pointer-events: none;
  opacity: 0;
  max-width: 60vw;
}

图像被固定在顶部，用left推到缩略图的右边。它们会滚动。默认情况下，用opacity隐藏它们，pointer-events: none意味着你的光标不能与图像交互，当它们自己悬停时，它们不会显示。视口宽度单位（vw）确保图像会调整大小以适合视口。

- 视区变小时减小大小：**

@media only screen and (max-width : 925px){
  .gallery > .full {
    left: 240px; 
  }  
  .gallery {
    width: 200px;
  }
}

Here is more information on @media.

完整的例子再次!

.gallery {
  columns: 2;
  column-gap: 0;
  width: 300px;
  margin: 20px 0 0 20px;
  transition: width .1s;
}

.gallery>.thumb {
  vertical-align: top;
  box-sizing: border-box;
  width: 100%;
  padding: 0 0 10px 10px;
  cursor: pointer;
}

.gallery>.full {
  position: fixed;
  top: 20px;
  left: 340px;
  pointer-events: none;
  opacity: 0;
  max-width: 60vw;
  transition: opacity .3s, width .3s, left .1s;
}

/* Hide first image when other thumbnail is hovered*/

.gallery:hover>.full:nth-child(2) {
  opacity: 0;
}

/*
1.No thumbnail is hovered:
  Show first image
2.Thumbnail is hovered
  Show image directly after hovered thumbnail
3.First thumbnail is hovered
  Show first image when first thumbnail is hovered
*/

.gallery>.full:nth-child(2),
.gallery>.thumb:hover+img,
.gallery>.thumb:first-child:hover+.full {
  opacity: 1;
}

@media only screen and (max-width: 925px) {
  .gallery>.full {
    left: 240px;
    transition: left .1s .05s
  }
  .gallery {
    width: 200px;
  }
}

/*Example styles */

body {
  margin: 0;
  background: #001f3f;
}

<div class="gallery">
  <img src="https://via.placeholder.com/500" width="60" class="thumb" />
  <img src="https://via.placeholder.com/500" class="full" />
  <img src="https://via.placeholder.com/400" width="60" class="thumb" />
  <img src="https://via.placeholder.com/400" class="full" />
  <img src="https://via.placeholder.com/700" width="60" class="thumb" />
  <img src="https://via.placeholder.com/700" class="full" />
  <img src="https://via.placeholder.com/400" width="60" class="thumb" />
  <img src="https://via.placeholder.com/400" class="full" />
  <img src="https://via.placeholder.com/600" width="60" class="thumb" />
  <img src="https://via.placeholder.com/600" class="full" />
  <img src="https://via.placeholder.com/800" width="60" class="thumb" />
  <img src="https://via.placeholder.com/800" class="full" />
  <img src="https://via.placeholder.com/900" width="60" class="thumb" />
  <img src="https://via.placeholder.com/900" class="full" />
  <img src="https://via.placeholder.com/400" width="60" class="thumb" />
  <img src="https://via.placeholder.com/400" class="full" />
  <img src="https://via.placeholder.com/700" width="60" class="thumb" />
  <img src="https://via.placeholder.com/700" class="full" />
  <img src="https://via.placeholder.com/400" width="60" class="thumb" />
  <img src="https://via.placeholder.com/400" class="full" />
  <img src="https://via.placeholder.com/600" width="60" class="thumb" />
  <img src="https://via.placeholder.com/600" class="full" />
  <img src="https://via.placeholder.com/700" width="60" class="thumb" />
  <img src="https://via.placeholder.com/700" class="full" />
</div>

赞(0）回复(0）举报 2023-02-01

g6ll5ycj3#

只需在a class=thumbnail下的第一个span中添加以下内容，即可默认显示第一个图像：

.container .thumbnail:first-child span{
    visibility: visible;
    z-index: 49;
    left: 150;
}

赞(0）回复(0）举报 2023-02-01

我来回答

仅CSS图片/缩略图库

3条答案

从头开始重建

下面是我们正在构建的内容的完整片段!

HTML

CSS

两列缩略图

完整的例子再次!

相关问题

热门标签

最新问答