如何在CSS縮略圖庫中獲取開始圖片

Question

我發現了一個堆棧問題，並提供了一個不錯的畫廊解決方案。 我也使用代碼來編寫自己的代碼。 該結構運行得很好，我使它完全動態，但是我有一個小問題。

這是@ Seika85的Gallery解決方案：

原始鏈接

問題：我無法將開始文本替換為dl中的IMG1

我想將“懸停縮略圖”替換為圖庫中的第一張全尺寸圖片。 當您打開頁面時，dl為空，僅當您翻閱或單擊縮略圖時才首先加載。

例：

我想像這樣加載它

而不是當我打開頁面時。

加載第一張圖片之前的文本區域代碼：

dl.container:before {
content: "Hover a thumbnail";
position: absolute;
font: 48px Tahoma;
display: block;
top: 150px;
color: #d8d8d8;
text-shadow: 1px 1px 3px #666;
width: 100%;
text-align: center;}

希望我能找到一種解決方案，以使其正常運行，謝謝。

Answer 1

只需添加：

dt:first-child + dd {
  opacity: 1;
}

默認情況下使第一個“活動/可見”。

更新小提琴