Question

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

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

Answer 1

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

.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

Answer 2

我假设你正在使用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;
}

在div悬停效果上显示图像

2 个答案: