添加CSS缓入和缓出过渡以更改图像

Question

当您将鼠标悬停在徽标上时，我试图添加一种简单的缓入缓出效果。 我知道有关于此的帖子。 我尝试了许多不同的CSS组合，但似乎无法使其正常工作。

通过使用以下CSS代码将鼠标悬停时更改内容，我已经成功更改了徽标颜色：

#dealertrackr-image.et_pb_image:hover {
content: url('image url');
}

当鼠标悬停在上方时，徽标从黑白状态变为彩色状态。 现在，我希望它在悬停和释放悬停时具有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> 

这是一个包含您的代码和图像的演示 。

Answer 2

如果您只希望灰度，则可能只对加载全彩色图像感兴趣，并使用CSS过滤器在悬停时进行去饱和/重新饱和处理。

结合CSS过渡将创建一个不错的淡入淡出：

img {
    -webkit-filter: grayscale(100%);
    filter: gray; filter: grayscale(100%);
    filter: url(desaturate.svg#greyscale);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    transition: all .25s ease;
}
img:hover {
    -webkit-filter: grayscale(0%);
    filter: none;
}

* edit这是一个纯CSS解决方案，但在Android Jellybean和Internet Explorer中不完全支持。 如果完整的浏览器支持对您很重要，请在同一篇文章中查看isherwood的答案。 为了获得全面支持，您的解决方案仅限于堆叠的图像或javascript。