В современных браузерах уже некоторое время доступен новый способ сделать это.
background-blend-mode позволяет получить некоторые интересные эффекты, одним из которых является преобразование в оттенках серого
Значение яркость , установленное на белом фоне, позволяет это сделать.
(чтобы увидеть его серым цветом)
.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>
Яркость берется из изображения, цвет берется из фона. Поскольку он всегда белый, цвет отсутствует.
Но это позволяет гораздо больше.
Вы можете анимировать эффект, установив 3 слоя. Первым будет изображение, а вторым будет бело-черный градиент. Если вы примените режим умножения наложения, вы получите белый результат, как и раньше, на белой части, но исходное изображение на черной части (умножение на белый дает белый, умножение на черный не действует).
На белой части градиента вы получаете тот же эффект, что и раньше. В черной части градиента вы накладываете изображение на себя, и в результате получается неизмененное изображение.
Теперь все, что нужно, это переместить градиент, чтобы получить этот эффект динамическим: (наведите курсор, чтобы увидеть его в цвете)
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>
ссылка
матрица совместимости