使用Bootstrap 4

Question

我对网络开发很陌生，所以请怜悯您的回复。

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

当点击带有叠加层的图像时，它应该打开一个模态（我已经有了这个工作），里面有全文和信息。

当进入/退出时，所有更改都需要看起来很平滑（当鼠标触摸时，覆盖不应该只是 ，它应该是动画等等）。

我不确定这个术语是什么，所以我很难在Google上找到信息搜索。所以，如果你能为我提供一些资源来学习这个，或提供一些例子，我们将不胜感激。在此先感谢：）

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

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

这和我想要的不同之处在于我想要显示文本而不是图标，我还希望鼠标悬停在网格中的单元格能够更加愉快地呈现将要显示的文本在叠加层上。

Answer 1

你可以只用css做这个，你需要将你的图像包装在div中并将位置设置为相对。然后将图像和叠加层放在其中。然后，您可以使用css过渡来实现所需的效果。您将叠加层的原始不透明度设置为0，并将悬停不透明度设置为1.下面是一个示例。由于您还没有发布任何代码，我无法告诉您的标记会是什么，所以我只是做了一个例子。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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/