How to change png color on hover?

Question

I made a down arrow in illustrator and saved it as a png with a transparent background. When I put it on my web page as img, it displays in its original color, which is good. I'm trying to do

img:hover{color:red;} 

and it does not work.

Does anyone know how to make it work?

thanks

Answer 1

If you focus on modern browsers, you can use CSS filters .

The hue-rotate filter is suitable for changing colors:

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

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

Please note that CSS filters are a new feature and browser support is limited .

---

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

Answer 2

What you need to do is set the image as a background image using CSS. Then set the freeze state using a different version of the image (with a different color). For instance:

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

Depending on where you place the image / class, you need to assign the appropriate height / width (or using the add-on).

Answer 3

You can change the color of an image with an identical image of a different color with an event (for example, 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; } 

More details here: http://css3.bradshawenterprises.com/cfimg/

Answer 4

I was also interested in learning about a simple way to do this as follows:

 .img:hover { background: red; } 

or

 .img:hover { color: red; } 

but no simple cross-browser solutions were found. However, I found that some browser solutions use SVG images with the fill attribute, which can be easily set using CSS.

However, if you use font-awesome (mostly a font that uses different icons instead of characters), it is easy to control with a simple CSS color attribute, as in the second example

So, if you want the simplest solution, find the SVG images for your project that match the ones you use. I found this process a little 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 this, and it's called potrace . One thing that I would recommend paying attention to if you decide to use this tool is to use simple editors to contrast the dark for everything you want to convert to path for the given .svg and white / light (not transparent) background color and areas that you do not want to see in the .svg file.

Answer 5

Application:

 {color:red} 

for any element means changing the color of the text.

Try changing:

 img:hover {color:red} 

in

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

and it works if you have only one image. If you have many images and you want only one to change on hover, set the ID for the image you want to change and change img and img: hover over #x and #x: hover over and replace x with the name, which you specified for the identifier.

Here's an example (suppose another HTML is intact and properly formatted):

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