How to change color of png on hover?

Question

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

Solution 1

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.

Solution 2

What you need to do is set the image as a background-image using CSS. Then set a hover state using another version of the image (with a different colour). For example:

.element {
  background-image: url(your-image.png);
}

.element:hover {
  background-image: url(your-image-hover-version.png);
}

Depending where you're putting the image/class, you'll need to assign appropriate height/width (or using padding).

Solution 3

I was also wondering about an easy way to do it like:

.img:hover {
      background: red;
}

or

.img:hover {
      color: red;
}

but no easy cross-browser support solutions were found. However, I found that some of the browser solutions were using SVG images that have a fill attribute which can be easily set by CSS.

However, if you use font-awesome (basically, it's a font where instead of characters you have different icons), it's easy to control with simple CSS attribute color, like in the second example

So, if you want the easiest solution - find SVG images for your project that correspond to the ones you use. I found this process a little bit painful and decided to learn how to convert png and .jpg and .png to .svg. There is a command-line tool that helps you do so and it's called potrace. One thing I would recommend looking at if you decide to use this tool is to use simple editors to contrast dark for everything you want to have converted into path for the given .svg and white/light (not transparent) colors to the background and the areas you don't want to see in your .svg file.

Solution 4

You can change the color of the image with an identical image of another color with an event (like hover).

html:

<div id="cf">
  <img class="bottom" src="/images/Windows%20Logo.jpg" />
  <img class="top" src="/images/Turtle.jpg" />
</div>

css:

   #cf {
      position:relative;
      height:281px;
      width:450px;
      margin:0 auto;
    }

    #cf img {
      position:absolute;
      left:0;
      -webkit-transition: opacity 1s ease-in-out;
      -moz-transition: opacity 1s ease-in-out;
      -o-transition: opacity 1s ease-in-out;
      transition: opacity 1s ease-in-out;
    }

    #cf img.top:hover {
      opacity:0;
    }

In detail here: http://css3.bradshawenterprises.com/cfimg/

View more solutions