javascript - 将鼠标悬停在图像上时在 div/文本中叠加/淡入淡出

Question

我有一个 <img>我希望能够悬停在上面，当悬停在上面时，我将能够在 div 或文本中设置动画或淡入淡出以显示各种信息。显示的信息将叠加在图像上。
我以前在一个网站上看到过这个，我不记得我在哪里看到过它，但这个想法在我脑海中非常清晰。

很抱歉，我对此没有任何好的尝试，我已经四处阅读但找不到任何适合我的想法的内容。

我还没有完全理解 JS，但是我可以想出一些想法来尝试让它工作。在我尝试自己完成剩下的工作之前，我只需要一点帮助让我朝着正确的方向前进。

我的第一个想法是直接删除图像，然后将其替换为在 background-image 中包含该图像的 div。用文字覆盖它。

document.getElementById("imageBox").onmouseover = function() {
    imageMouseOver()};
var image = document.getElementById("imageBox");
var textHere = imagine a lot of html here;
function imageMouseOver() {
    document.getElementById("imageBox").parentNode.removeChild(image);
    document.getElementById("imageBox").add(textHere);
};
    

上面的方法行不通，我的其他想法将基于最初的想法，例如:-不是删除图像，而是降低图像的不透明度并在其上添加一些东西来模拟这种效果- 或者，有 opacity:0到实际的覆盖层以隐藏它，并且 onmouseover , 只需让它显示为 opacity:1也许transition: opacity 200ms ease ？

抱歉，我在这里问得太多了，但我几乎不知道从哪里开始，有人可以指点我从哪里开始吗？理想情况下，几个例子会很好，或者一个解释它的网站会很棒!

Answer 1

这是一个 CSS 示例，使用 :hover 来transition 文本元素的 opacity。

.wrap {
  display: inline-block;
  position: relative;
  padding: 1em;
  background: #fff;
  box-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
.text {
  background: rgba(0,0,0,0.8);
  color: #fff;
  transition: opacity .5s;
  opacity: 0;
  position: absolute;
  top: 1em; bottom: 1em; left: 1em; right: 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap:hover .text {
  opacity: 1;
}
img {
  max-width: 100%;
  display: block;
}

<div class="wrap">
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
  <div class="text">text overlay</div>
</div>