CSS-Only图片/缩略图库

Question

虽然我已经查看了许多仅限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> 

Answer 1

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

......应该这样做。

如果width:134px; on .container是一个问题，为它添加一个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;
}

更新的代码段：

 .container { width: 134px; margin-right: 466px; position: relative; display: flex; flex-wrap: wrap; } .container:not(:hover) .thumbnail:first-child img + span { visibility: visible; left: 150px; } .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: 1px solid transparent; } .thumbnail span { /*CSS for enlarged image*/ position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; 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/500x300" width="60" /><span><img src="http://www.placehold.it/500x300" width="500" /></span> </a> <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/400x500" width="60" /><span><img src="http://www.placehold.it/400x500" width="500" /></span><br /> </a> <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500x350" width="60" /><span><img src="http://www.placehold.it/500x350" width="500" /></span> </a> <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500x250" width="60" /><span><img src="http://www.placehold.it/500x250" width="500" /></span><br /> </a> <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/350x500" width="60" /><span><img src="http://www.placehold.it/350x500" 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/450x500" width="60" /><span><img src="http://www.placehold.it/450x500" 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/500x200" width="60" /><span><img src="http://www.placehold.it/500x200" width="500" /></span> </a> <a class="thumbnail" href="#thumb"><img border="0" src="http://www.placehold.it/500x450" width="60" /><span><img src="http://www.placehold.it/500x450" 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的末尾加载/应用。 或者修改当前CSS中的属性。

Answer 2

从头开始重建

兼容性：在Chrome，Firefox，IE11和Edge中测试过。 将适用于所有非古代浏览器。

---

以下是我们正在建设的完整片段！

一些简单的过渡使一切顺利。

 .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="http://www.placehold.it/700/39CCCC" width="60" class="thumb" /> <img src="http://www.placehold.it/700/39CCCC" class="full" /> <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" /> <img src="http://www.placehold.it/600/85144b" class="full" /> <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" /> <img src="http://www.placehold.it/500/3D9970" class="full" /> <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" /> <img src="http://www.placehold.it/400/FFDC00" class="full" /> <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" /> <img src="http://www.placehold.it/700/39CCCC" class="full" /> <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" /> <img src="http://www.placehold.it/600/85144b" class="full" /> <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" /> <img src="http://www.placehold.it/500/3D9970" class="full" /> <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" /> <img src="http://www.placehold.it/400/FFDC00" class="full" /> <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" /> <img src="http://www.placehold.it/700/39CCCC" class="full" /> <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" /> <img src="http://www.placehold.it/600/85144b" class="full" /> <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" /> <img src="http://www.placehold.it/500/3D9970" class="full" /> <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" /> <img src="http://www.placehold.it/400/FFDC00" class="full" /> </div> 

---

HTML

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

<div class="gallery">
  <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" />
  <img src="http://www.placehold.it/700/39CCCC" class="full" />

  <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" />
  <img src="http://www.placehold.it/600/85144b" class="full" />

  <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" />
  <img src="http://www.placehold.it/500/3D9970" class="full" />

  <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" />
  <img src="http://www.placehold.it/400/FFDC00" class="full" />
</div>

（如果您需要将标题文本添加到完整大小的图像，那么您可以保持包装完整大小的图像并相应地更改此处使用的CSS。）

CSS

如果未选择任何内容，则显示第一个完整尺寸图像

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

这是关于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. 始终显示第一张完整尺寸的图像
2. 显示悬停缩略图后面的完整尺寸图像
3. 确保在缩略图悬停时显示第一张图像。 这会覆盖图库悬停隐藏选择器。

两列缩略图

使用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 ，填充物被吸收到宽度。

以下是有关CSS列和框大小调整的 一些信息 。

在正确的位置显示完整尺寸的图像：

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

图像固定在顶部，并left推到缩略图的left 。 他们会滚动。 默认情况下，它们隐藏了不透明度和pointer-events: none表示光标无法与图像交互，并且当它们自己悬停时它们不会显示。 视口宽度单位 （ vw ）确保图像将调整大小以适合视口。

视口变小时缩小尺寸：

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

以下是有关@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="http://www.placehold.it/700/39CCCC" width="60" class="thumb" /> <img src="http://www.placehold.it/700/39CCCC" class="full" /> <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" /> <img src="http://www.placehold.it/600/85144b" class="full" /> <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" /> <img src="http://www.placehold.it/500/3D9970" class="full" /> <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" /> <img src="http://www.placehold.it/400/FFDC00" class="full" /> <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" /> <img src="http://www.placehold.it/700/39CCCC" class="full" /> <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" /> <img src="http://www.placehold.it/600/85144b" class="full" /> <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" /> <img src="http://www.placehold.it/500/3D9970" class="full" /> <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" /> <img src="http://www.placehold.it/400/FFDC00" class="full" /> <img src="http://www.placehold.it/700/39CCCC" width="60" class="thumb" /> <img src="http://www.placehold.it/700/39CCCC" class="full" /> <img src="http://www.placehold.it/600/85144b" width="60" class="thumb" /> <img src="http://www.placehold.it/600/85144b" class="full" /> <img src="http://www.placehold.it/500/3D9970" width="60" class="thumb" /> <img src="http://www.placehold.it/500/3D9970" class="full" /> <img src="http://www.placehold.it/400/FFDC00" width="60" class="thumb" /> <img src="http://www.placehold.it/400/FFDC00" class="full" /> </div> 

Answer 3

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

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