css - 如何轻松过渡 .5s

Question

我有这张图片，悬停时会添加色调并在其上放置文本。我想添加 transition: .5s ease; 但由于某些原因它不起作用。这是一个jsfiddle不知道该怎么做，我已经尝试了所有我能想到的，但我很困惑，不知道该怎么做。

感谢任何帮助

谢谢

代码

.col-sm-6 {
  min-height: 500px;
  background: lightgrey;
  text-align: center;
}

.image-wrap {
  display: inline-block;
  max-width: 100%;
  position: relative;
}

.image-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  opacity: 1;
  transition: display .5s ease;
  display: none;
}

.image-wrap:hover .overlay {
  display: block;
}

.red {
  background: rgba(255, 0, 0, 0.5);
}

.blue {
  background: rgba(0, 0, 255, 0.5);
}

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <a href="#" class="image-wrap">
        <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" />
        <div class="overlay red">
          <h3>Image Heading</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p>
        </div>
      </a>
      <a href="#" class="image-wrap">
        <img class="img-responsive" src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" />
        <div class="overlay blue">
          <h3>Image Heading</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, tempore?</p>
        </div>
      </a>
    </div>
  </div>
</div>

Answer 1

需要一些小的改动。基本上你不能动画显示，因此作为一种解决方法，你可以动画不透明度，你的叠加层将始终具有 0 的不透明度，当你悬停时，不透明度将变为 1，所需的动画如下:

.image-wrap .overlay {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  color:white;
  opacity: 0;
  transition: opacity .5s ease;
}

.image-wrap:hover .overlay {
  opacity: 1;
}