Превратите изображение из серого в настоящий глубокий черный при наведении

Question

При наведении курсора на изображение мне бы хотелось, чтобы оно стало черным.По умолчанию изображение серое.

img:hover {
  filter: grayscale(100%) brightness(1.6) saturate(2) contrast(150);
}

<img src="https://i.stack.imgur.com/wpQiz.png">

Answer 1

Используйте инвертированный фильтр, и вы станете ближе:

img:hover {
 filter: invert(1);
}

<img src="https://i.stack.imgur.com/wpQiz.png" >

Или просто brightness(0)

img:hover {
 filter: brightness(0);
}

<img src="https://i.stack.imgur.com/wpQiz.png" >

Answer 2

Почему бы не подумать об обратном, использовать черное изображение и изменить визуальный уровень с opacity уровнями?

img {
  width: 100px;
  height: auto;
  opacity: .5;
  transition: opacity .25s;
}
img:hover {
  opacity: 1;
}

<img src="https://i.stack.imgur.com/Eo3De.png">

Answer 3

Не может быть сделано следующее?(Вам понадобятся 2 отдельных изображения, одно серое и одно черное)

<img src='../img/badge/graydot.png' onmouseover="this.src='../img/badge/blackdot-hover.png';" onmouseout="this.src='../img/badge/graydot.png';" />