Html 在图像网格下添加内容以跨越页面长度

我正在寻找一些关于我正在处理的图像网格的建议

以此为例：

假设我想在HTML中的每个图像下面添加如下内容：

<div>This is my piece of very long content that I want to display under all images in a row. It should span underneath all images.</div>

这是我的一段很长的内容，我想在一行中的所有图像下显示。它应该覆盖所有图像。

默认情况下，此内容将被隐藏，并且某些操作将使其显示（例如单击特定图像）。我试图实现的是，根据页面的长度，这个div（或不管它最终是什么）显示页面的长度。因此，如果有4个图像，文本将显示在前四个图像下。如果有两个图像（由于分辨率大小的变化），它将显示在两个以下。这与它在HTML中的图像下方显示相反

---

不确定如何最好地编写它-有什么建议吗？

一个快速的方法是在图像周围使用一些额外的标记。您可以手动添加它或使用javascript动态构造它

这里有一个例子。我不确定这是你想要的效果

我在图像周围插入了一个div，并在下面显示了一个包含文本的span（为其中3个图像这样做了）

这是用于悬停效果的css

.column div span{
    display: none;
    position: absolute;
    z-index: 99;
    left:0;
    background: #0095ff;
    color: #ffffff;
    padding:20px;
    box-sizing: border-box;
    width: 100%;
}
.column div:hover span{
    display:block;
}

添加的标记类似于：

<div>
 <img src="https://www.w3schools.com/w3images/wedding.jpg" style="width:100%">
 <span>This is some text</span>
</div>

这是一些文本
其他文本
更多文本

你想在img上显示悬停文字吗？我不想以任何方式表示否定，但老实说，这不是一个好问题，因为有很多不同的方法可以实现这一点，并且有很多开放的要求。如果你想得到一些建议，我建议你考虑采取移动优先的方法。您可以对其进行结构设计，使每个图像都有与之相关联的文本，然后从那里开始。但我会先尝试一些东西，然后再尝试回答一个更具体的问题。我有一些jquery设置，这样当你点击一个图像时，内容就会显示出来。我希望内容以响应方式显示（如图像网格示例），但要跨越显示的整行图像，而不仅仅是内容所在的图像。这正是我想要的。谢谢@signal2013！