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

Question

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

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

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

当它们进入/退出时，所有变化都需要通过过渡看起来平滑(覆盖不应该只是在鼠标触摸时在那里，它应该以动画形式出现，等等)。

我不确定正确的术语是什么，所以我很难在 Google 上搜索信息。所以，如果你能为我提供一些资源来学习这个，或者提供一些例子，我将不胜感激。提前致谢:)

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

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

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

Answer 1

你可以只用 css 做到这一点，首先你需要将你的图像包装在一个 div 中并将位置设置为 relative。然后将图像和叠加层放在其中。然后你可以使用 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>