Uma nova maneira de fazer isso está disponível há algum tempo nos navegadores modernos.
O modo de mesclagem em segundo plano permite obter alguns efeitos interessantes, e um deles é a conversão em escala de cinza
A luminosidade do valor , definida em um fundo branco, permite isso. (passe o mouse para vê-lo em cinza)
.test {
width: 300px;
height: 200px;
background: url("http://placekitten.com/1000/750"), white;
background-size: cover;
}
.test:hover {
background-blend-mode: luminosity;
}
<div class="test"></div>
A luminosidade é tirada da imagem, a cor é tirada do fundo. Como é sempre branco, não há cores.
Mas permite muito mais.
Você pode animar o efeito configurando 3 camadas. O primeiro será a imagem e o segundo será um gradiente branco-preto. Se você aplicar um modo de mesclagem múltipla, obterá um resultado branco como antes na parte branca, mas a imagem original na parte preta (multiplicar por branco dá branco, multiplicar por preto não tem efeito).
Na parte branca do gradiente, você obtém o mesmo efeito de antes. Na parte preta do gradiente, você está mesclando a imagem sobre si mesma, e o resultado é a imagem não modificada.
Agora, basta mover o gradiente para obter esse efeito dinâmico: (passe o mouse para vê-lo em cores)
div {
width: 600px;
height: 400px;
}
.test {
background: url("http://placekitten.com/1000/750"),
linear-gradient(0deg, white 33%, black 66%), url("http://placekitten.com/1000/750");
background-position: 0px 0px, 0px 0%, 0px 0px;
background-size: cover, 100% 300%, cover;
background-blend-mode: luminosity, multiply;
transition: all 2s;
}
.test:hover {
background-position: 0px 0px, 0px 66%, 0px 0px;
}
<div class="test"></div>
referência
matriz de compatibilidade