将鼠标悬停在图像上时，可在div/文本中进行叠加/淡入 [英] Overlay/fade in a div/text when hovering over an image

问题描述

我有一个<img>，我希望能够将其悬停，并且将鼠标悬停在其上时，我可以在div或文本中设置动画或淡入淡出以显示各种信息.显示的信息将覆盖在图像上.
我以前在一个网站上已经看到过此操作，我不记得或在哪里看到过它，但是这个主意在我脑海中非常清晰.

I have an <img> that I want to be able to hover over, and when hovering over it I would be able to animate or fade in a div or text to display information of sorts. The information displayed will be overlaid on the image.
I've seen this done on a website before, I can't remember or place where I've seen it, but the idea is very clear in my mind.

很抱歉，我对此没有任何尝试，我已经阅读了很多，找不到适合我想法的任何东西.

I'm sorry I don't have any good attempts at this, I've read around and can't find anything that works for my idea.

我还没有完全理解JS，但是我可以想到一些尝试使之起作用的想法.在我自己尝试做其余的事情之前，我只需要一点帮助就能使我朝正确的方向前进.

I have not understood JS fully, but I can think of a few ideas to try and make it work. I just need a little help to get me in the right direction, before I try and do the rest by myself.

我的第一个想法是直接删除图像，然后将其替换为在background-image中具有该图像并带有文字覆盖的div.

My first idea would be to remove the image directly, then replace it with a div that has that image in background-image with text overlaying it.

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一起显示?

The above doesn't work, and my other ideas would be based off of the initial one, for example: -instead of removing the image, have the opacity of the image be reduced and something be added over it to simulate that effect -or, have opacity:0 to the actual overlay to hide it, and onmouseover, just make it appear with opacity:1 and maybe transition: opacity 200ms ease?

对不起，我在这里问的太多了，但是我从哪里开始却一无所知，有人可以指点我来入门吗?理想情况下，几个例子会很好，或者一个解释它的网站会很棒！

Sorry I am asking too much here, but I'm pretty much clueless where to start, could someone point me somewhere for me to get started? Ideally a few examples would be good, or a site explaining it would be great!

推荐答案

下面是CSS的示例，该示例使用:hover到transition文本元素的opacity.

Here's an example with CSS using :hover to transition the opacity of your text element.

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

这篇关于将鼠标悬停在图像上时，可在div/文本中进行叠加/淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！