使用 Bootstrap 4 覆盖带有文本的图像

Question

我是网络开发的新手，所以请多多包涵您的回答。

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

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

当它们进入/退出时，所有变化都需要通过过渡看起来平滑（覆盖不应该只在鼠标触摸时 _出现_，它应该动画化等）。

我不确定正确的术语是什么，所以我正在努力寻找在谷歌上搜索的信息。所以，如果你能为我提供一些资源来学习这个，或者提供一些例子，我将不胜感激。提前致谢 ：）

编辑：这接近我想要发生的事情将会有一个图像，如下所示：

将鼠标悬停在该图像上后，叠加层应动画如下所示：

这和我想要的之间的区别是，我想显示文本而不是图标，我还希望鼠标悬停在其上的网格中的单元格展开以更愉快地呈现将在叠加层上显示的文本.

原文由 loganrussell48 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以只用 css 做到这一点，首先你需要将你的图像包装在一个 div 中并将位置设置为相对。然后将图像和叠加层放在其中。然后你可以使用 css transitions 来达到想要的效果。您将覆盖层的原始不透明度设置为 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>

原文由 Steve K 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

原文由 Montaycabe 发布，翻译遵循 CC BY-SA 4.0 许可协议