How to change color of png on hover?

css, html, icons, png

Solution

Update 2023

You may use CSS `hue-rotate` filter for changing image colors:

img:hover {
  filter: hue-rotate(180deg);
}

It is supported in most modern browsers — see CanIUse.

Besides, you could also save your image as an SVG (rather than a PNG) and style any part of the SVG as you need.

Original answer (2015)

If you target modern browsers, you may use CSS filters.

The `hue-rotate` filter is suitable for changing colors:

filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);

The exact amount of degrees depends on your image and expected results.

Note that CSS filters is a new feature, and its browser support is limited.

Alternatively, you may use CSS sprites technique, which works in all browsers of reasonable age.

Problem

I made a "down arrow" in illustrator and saved it as a png with a transparent background. When I put it into my webpage as an img, it shows up in the original color, which is okay. I'm trying to do ``` img:hover{color:red;} ``` and it doesn't work. Does anyone know how to make it work? Thanks

Original source