使用 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/