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

Answer 1

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).

Answer 2

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/

Answer 3

Applying:

{color:red}

to any element means changing text color.

Try changing:

img:hover {color:red}

to:

img:hover {background-image: url('<insert url to red arrow here>');}

and this works if you only have one image. If you have many images and you want only one to change on hover, then set an ID for the image you want to change and change img and img:hover to #x and #x:hover and replace x with the name you given for the ID.

Here's an example (assume other HTML is intact and properly formatted):

<style type="text/css">
#abc:hover {background-image: url('redarrow.png');}
</style>    
<img ID="abc" src="normalarrow.png">

Answer 4

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.

Answer 5

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.