如何在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;
}

默认情况下使第一个“活动/可见”。

更新小提琴