在 div 悬停效果上显示图像答案

【问题标题】：Show Image on div hover effect在 div 悬停效果上显示图像
【发布时间】：2023-04-02 20:55:01
【问题描述】：

有许多插件会在将鼠标悬停在图像上时显示图像的标题（例如：http://tympanus.net/Tutorials/CaptionHoverEffects/index4.html）。

我想达到相反的效果，即当一个人悬停在包含文本的 div 上时，应该会出现图像。任何人都可以帮助我吗？

【问题讨论】：

根据指南，请显示一些您用来生成此文件的示例代码。解决方案非常简单，使用 JS 或 Jquery，通常您将注册一个悬停事件，该事件可以根据您的需要执行。如果你有一个例子，我很乐意提供更多帮助。
请显示您尝试过的代码...

【解决方案1】：

我假设您使用的是html5，如果是这样，您应该使用适合您内容上下文的标签：

<figure>
    <img src="http://placekitten.com/200/100" />
    <figcaption>Test message</figcaption>
</figure>

和css

figure {
    position: relative;
    display: inline-block;
}

figcaption {
    display: none;
    position: absolute;
    left: 0;
    bottom: 5px;
    right: 0;
    background-color: rgba(0,0,0,.15);
}

figure:hover img {
    opacity: .7;
}

figure:hover figcaption {
    display: block;
}

【讨论】：

【解决方案2】：

不确定您期待什么样的动画。你可以试试这样：

.container {
  width: 200px;
  height: 200px;
  border: 1px solid #d4d4d4;
  background: #fff;
  border-radius: 3px;
  text-align: center;
  position: relative
}
.container:hover .text {
  opacity: 0
}
.container:hover .img {
  opacity: 1
}
.text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  left: 0;
  right: 0;
  opacity: 1;
  transition: opacity .3s linear;
}
.img {
  transition: opacity .3s linear;
  top: 0;
  bottom: 0;
  position: absolute;
  opacity: 0;
}

<div class="container">
  <div class="text">
    Hover On me....
  </div>
  <div class="img">
    <img src="http://eskipaper.com/images/images-4.jpg" height='100%' width='100%' />
  </div>
</div>

Example

【讨论】：