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

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

html:

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/