CSS-Only图片/缩略图库

时间：2017-09-28 22:41:42

标签： html css ebay

虽然我已经查看了许多仅限CSS的脚本，但我无法弄清楚如何在默认情况下显示第一个图像，而不是在第一个图像打开时显示空白。这必须只是CSS - javascript和其他＆＃34;活动内容＆＃34;不允许。请指教。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：4)

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

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

如果width:134px;上的.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中的属性。

答案 1 :(得分：1)

从头开始重建

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

以下是我们在下面构建的完整片段！

一些简单的transitions可以解决所有问题。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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;
}

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

    4. 两列缩略图

    使用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表示您的光标无法与图像交互，并且当它们自己悬停时它们不会显示。 viewport width unit（vw）可确保图片大小调整以适应视口。

    视口变小时缩小尺寸： 

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

    Here is more information on @media.

    再次完整的例子！

    ＆＃13;
    ＆＃13; 
    .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;
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 2 :(得分：0)

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

.container .thumbnail:first-child span{
    visibility: visible;
    z-index: 49;
    left: 150;
}
相关问题
最新问题