CODEWITHSUNDEEP
css
HoCo_
HoCo_

Reputation: 1372

Turn an image from grey to a real deep black when hovering

When I'm hovering the image I would like it to turn black. The image is gray by default.

img:hover {
  filter: grayscale(100%) brightness(1.6) saturate(2) contrast(150);
}
<img src="https://i.sstatic.net/wpQiz.png">

Upvotes: 0

Views: 103

Answers (3)

Temani Afif
Temani Afif

Reputation: 273649

Use the invert filter and you will get closer:

img:hover {
 filter: invert(1);
}
<img src="https://i.sstatic.net/wpQiz.png" >

Or simply brightness(0)

img:hover {
 filter: brightness(0);
}
<img src="https://i.sstatic.net/wpQiz.png" >

Upvotes: 3

Stickers
Stickers

Reputation: 78726

Why not think the other way around, use a black image and change the visual with opacity levels?

img {
  width: 100px;
  height: auto;
  opacity: .5;
  transition: opacity .25s;
}
img:hover {
  opacity: 1;
}
<img src="https://i.sstatic.net/Eo3De.png">

Upvotes: 2

user5361347
user5361347

Reputation:

Could not the following be done? (you would need 2 separate images though, one gray and one colored black)

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

Upvotes: 1

Related Questions