Make a black and white image turn to color on hover - HTML/CSS/Javascript

Question

Does anyone know how to make black and white images animate to color when you hover over them. This would be like digitally revealing a painting or doing a text fill animation if that makes sense. It's an idea I have for a project.

Answer 1

Look into the filter function saturate which gives the ability to control the saturation of the colors on an element. Along with a transition you get the effect of animation.

a.colorful {
  display: inline-block;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(
   90deg,
   red,
   orange,
   yellow,
   green,
   blue,
   indigo,
   violet
  );
  width: 50vw;
  padding: 2rem;
  border-width: 0;
  font-family: sans-serif;
  font-size: 2rem;
  text-shadow: 1px 1px 2px #000;
  filter: saturate(0);
  transition: all 0.2s;
}
a.colorful:hover {
  filter: saturate(1);
  border: none;
}

<a class="colorful">Hello!</a>