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

#html #css #filter #png

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


  


На одном сайте увидел, что при наведении на изображение подобного формата,  изменяется
его состояние (при наведении изображение становится цветным).

Как это реализовать без grayscale-фильтра в css?
    

Ответы

Ответ 1

Использовать картинку в качестве 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;
}

  

  

  




Ответ 2

Да, несколько картинок в одной и менять их позиции, это и есть:


  Спрайты


Или на ховер менять в css background-image, что не так хорошо, ибо дергается при
загрузке.