PNG color substitution on mouse hover

Question

PNG color substitution on mouse hover

Tell me how to use CSS, when hovering the cursor, to replace the color of the PNG icon (for example, this: ) from gray to red.

2

html css hover png

Author: Victor VosMottor, 2018-10-14

Source

3 answers

score 7 · Answer 1

In CSS3, this is possible with the filter property:

img:hover {
  -webkit-filter: sepia(1) hue-rotate(320deg) saturate(10);
  filter: sepia(1) hue-rotate(320deg) saturate(10);
}

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

The filter chain is as follows (order is important!):

sepia - essentially makes the image monochrome with a red hue;
hue-rotate - rotate the color wheel to the desired shade;
saturate - color saturation.

Source

To turn any color to white:

body { background: #ccc; }

img:hover {
  -webkit-filter: grayscale(100) brightness(200);
  filter: grayscale(100) brightness(200);
}

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

Here the chain is as follows:

grayscale - discolor the image;
brightness - setting the brightness to a deliberately high value.

score 2 · Answer 2

Prepare a separate sprite with icons of different colors (as shown below). In CSS styles, fix the block sizes. Set the background image for the block. For the :hover pseudo-class, specify the offset of this image equal to the height (or width) of the image. The result is an element that changes slightly when the mouse pointer hovers over it.

.i-folder {
  height: 42px;
  width: 57px;
  background: url(/images/content/893054/85e10aa66e91dcdae284d51df2e33b7b.png);
}
.i-folder:hover {
  background-position: 0px 42px;
}

<div class="i-folder"></div>

score 2 · Answer 3

Browser support: caniuse.com/#search=mask

div {
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-image: url('https://image.flaticon.com/icons/svg/1086/1086563.svg');
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: #000;
}

div:nth-child(1) { background: linear-gradient(#e74c3c, #f1c40f); }
div:nth-child(2) { background-color: #1842de; }
div:nth-child(3) { background-color: #ffff00; }
div:nth-child(4) { background-color: #3498db; }
div:nth-child(5) { background-color: #9b59b6; }
div:nth-child(6) { background-color: #2ecc71; }

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>