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