Как заменить черно-белую .png на цветную?

Есть такая картинка в формате ".png" :

На одном сайте увидел, что при наведении на изображение подобного формата, изменяется его состояние (при наведении изображение становится цветным).
Как это реализовать без grayscale-фильтра в css?

Ответ

Использовать картинку в качестве background, а затем при наведении менять расположение(background-position):
.block { display: inline-block; width: 5rem; height: 5rem; background-image: url("https://cdn-images-1.medium.com/max/924/1*ECSuMpJxNLViTxUOounYlw.png"); transition: 0.5s; } .v2 { background-position: -85px 0px; } .v3 { background-position: -170px 0px; } .v1:hover { background-position: 0 -86px; } .v2:hover { background-position: -85px -84px; } .v3:hover { background-position: -170px -84px; }