将鼠标悬停在图像上时，在div /文本中覆盖/淡入

我有一个<img>，我希望能够将鼠标悬停在上面，并且将鼠标悬停在其上时，我可以在div或文本中设置动画或淡入以显示各种信息。显示的信息将叠加在图像上。
我以前在网站上看到过这样做，我不记得或放置在我看过的地方，但这个想法在我的脑海中非常清晰。将鼠标悬停在图像上时，在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); 
 
};

以上不工作，和我的其他想法将根据离最初的一，例如： -instead移除图像中，有图像的不透明度减少和增加一些东西来模拟效果 - 或者，有opacity:0到实际的覆盖层来隐藏它，onmouseover，只是使它出现opacity:1和transition: opacity 200ms ease？

对不起，我在这里问的太多了，但我几乎无法从哪里开始，有人能指点我一个地方为我开始？理想情况下，一些例子会很好，或者一个网站解释它会很棒！

来源

2017-04-09 Mark

下面是使用文本元素的:hover到transitionopacity的CSS示例。

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

来源

2017-04-09 02:43:40

将鼠标悬停在图像上时，在div /文本中覆盖/淡入

回答

相关问题