html - 如何在 CSS 缩略图库中获取起始图片

Question

我发现了一个堆栈问题，有一个很好的画廊解决方案。我也使用代码制作了自己的代码。结构工作得很好，我让它完全动态，但我有一个小问题。

这是@Seika85 的画廊解决方案：

来自原文的链接

问题：我无法将开始文本替换为 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;}

我希望我能找到一个解决方案来使它工作，谢谢。

标签： htmlcss

Answer 1

只需添加：

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

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

更新小提琴