为更改图像添加CSS缓入和缓出转换

Question

当您将鼠标悬停在徽标上时，我会尝试添加简单的缓入和缓出效果。我知道有关于此的帖子。我尝试过很多不同的CSS组合，但似乎无法让它发挥作用。

我在使用此CSS代码悬停时更改了内容，从而成功更改了徽标颜色：

read

当它悬停在上面时，徽标会从黑白状态变为彩色状态。我现在想让它在悬停和释放悬停时具有1s缓入和缓出。我没有尝试过任何工作。

http://www.nationalgalactic.com/divisions/

Answer 1

对图像执行此操作的唯一方法是堆叠元素并转换顶层的不透明度。浏览器不进行图像到图像的转换。

这样的东西，其中锚具有背景图像：

a {
  display: inline-block;
  background: url(http://lorempixel.com/400/150/nature) left top no-repeat;
}
a img {
  transition: opacity 1s;
}
a:hover img {
  opacity: 0;
}

<a href="#">
    <img src="http://lorempixel.com/400/150/nature/2" alt="">
</a>

Here's a demo 包含您的代码和图片。