使黑白图像在悬停时变成彩色 - HTML/CSS/Javascript

Question

有谁知道如何在将鼠标悬停在黑白图像上时使其变为彩色动画。这就像以数字方式展示一幅画或制作文本填充动画（如果有意义的话）。我还没有做过任何事情，但这是我对一个项目的一个想法。

Answer 1

不悬停时只需使用滤镜来降低彩色图像的饱和度。

img {
  filter: saturate(0);
  transition: 0.3s;
}

img:hover {
  filter: saturate(100%);
}

<img src="https://picsum.photos/id/203/400/200">