Подобного эффекта можно добиться с помощью фильтров webkit:
img {
-webkit-filter: grayscale(100%);
-webkit-filter: contrast(0%);
-webkit-filter: brightness(0%);
}
img:hover {
-webkit-filter: grayscale(0%);
-webkit-filter: contrast(100%);
-webkit-filter: brightness(100%);
}
img {
-webkit-filter: grayscale(100%);
-webkit-filter: contrast(0%);
-webkit-filter: brightness(0%);
}
img:hover {
-webkit-filter: grayscale(0%);
-webkit-filter: contrast(100%);
-webkit-filter: brightness(100%);
}
<img src="https://i.sstatic.net/gZw5u.png" alt="">
Обратите внимание, что этот метод поддерживается не всеми браузерами. Для поддержки IE вы можете установить это как фоновое изображение и изменять его при наведении курсора.
Использование двух изображений для лучшей совместимости с браузером
Если вы хотите использовать два изображения, вы можете добиться того же эффекта с гораздо более широкой поддержкой браузера, просто поменяв изображение местами при наведении курсора. Что-то вроде этого:
div {
height: 400px;
width: 400px;
background-image: url('https://i.sstatic.net/Pmz7l.png');
background-repeat: no-repeat;
}
div:hover {
background-image: url('https://i.sstatic.net/gZw5u.png');
}
img {
-webkit-filter: grayscale(100%);
-webkit-filter: contrast(0%);
-webkit-filter: brightness(0%);
}
img:hover {
-webkit-filter: grayscale(0%);
-webkit-filter: contrast(100%);
-webkit-filter: brightness(100%);
}
div {
height: 400px;
width: 400px;
background-image: url('https://i.sstatic.net/Pmz7l.png');
background-repeat: no-repeat;
}
div:hover {
background-image: url('https://i.sstatic.net/gZw5u.png');
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>
<div></div>
Улучшенный пример, поддерживающий все цвета
Это решение требует немного больше работы, но поддерживает все цвета, а не только черный!
img {
-webkit-filter: url(#monochrome);
filter: url(#monochrome);
}
img:hover {
filter: none;
}
<img src="https://i.sstatic.net/gZw5u.png" alt=""></img>
<svg>
<filter id="monochrome" type="matrix" color-interpolation-filters="sRGB">
<feColorMatrix type="matrix"
values="0 0 0 0 0.6588
0 0 0 0 0.4745
0 0 0 0 0.1686
0 0 0 1 0" />
</filter>
</svg>
Вот важные моменты:
В этом методе используется , в основном расширенная функция для определения ваших собственных фильтров. Здесь я свел все цветовые каналы к нулю (все нули для первых четырех столбцов), а затем добавил к ним постоянное значение, которое мне было нужно (это последний столбец). Убедитесь, что в теге указан type = "matrix", а в теге задается color-interpolation-filters = "sRGB", иначе матрица будет интерпретироваться по-разному.
Эти сообщения были очень полезны, если вы хотите узнать больше:
https://alistapart.com/article/finessing-fecolormatrix
https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/
Свободный перевод ответа от участника @pgruber.