使用Bootstrap 4在文本上覆盖图像

Question

我是Web开发的新手，所以请留意您的回答。

我有一个要修改的图像网格。 当鼠标悬停在图像上时，我希望在图像上出现一个带有文本的叠加层（这可能要求网格中的单元格展开以包含所有文本）。

单击带有叠加层的图像时，它应该打开一个包含全文和信息的模式（我已经在使用它了）。

当它们进入/退出时，所有更改都需要在过渡时看起来平滑（过渡不仅应该在鼠标触摸时出现，还应该在其中进行动画处理，等等）。

我不确定该使用什么正确的术语，因此我正在努力寻找在Google上搜索的信息。 因此，如果您可以为我提供一些学习的资源或提供一些示例，将不胜感激。 提前致谢 ：）

编辑：这接近于我要发生的事情会有一个图像，像这样：

鼠标悬停在此图像上之后，应当使覆盖层动画化，如下所示：

这和我想要的东西之间的区别是，我想显示文本而不是图标，并且我还希望鼠标悬停在其上的网格中的单元格展开以更舒适地呈现将在覆盖层上显示的文本。

Answer 1

您可以仅使用CSS来执行此操作，首先需要将图像包装在div中并将位置设置为相对。 然后将图像及其叠加层放置在其中。 然后，您可以使用CSS过渡来达到所需的效果。 您将叠加层的原始不透明度设置为0，并将悬停不透明度设置为1。下面是一个示例。 由于您尚未发布任何代码，因此我无法告知您的标记是什么，所以我举了一个例子。

 .img-container{ position:relative; display:inline-block; } .img-container .overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgb(0,170,170); opacity:0; transition:opacity 500ms ease-in-out; } .img-container:hover .overlay{ opacity:1; } .overlay span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; } 

 <div class="img-container"> <img src="https://placehold.it/300x300"> <div class="overlay"> <span>overlay content</span> </div> </div> 

Answer 2

将图像设置为“块”

 .img-container{ position:relative; display:inline-block; } .img-container img{ display:block } .img-container .overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:rgb(0,170,170); opacity:0; transition:opacity 500ms ease-in-out; } .img-container:hover .overlay{ opacity:1; } .overlay span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; } 

 <div class="img-container"> <img src="https://placehold.it/300x300"> <div class="overlay"> <span>overlay content</span> </div> </div> 

Answer 3

听起来好像您在寻找工具提示，请参阅https://getbootstrap.com/docs/4.0/components/tooltips/