Apply color overlay to picture in HTML pages <p>I have a PNG picture representing a monochrome white magnifying glass with an alpha channel. This image is overlayed on the top of other pictures, with a semi-transparent background such that you still see below it:</p> <p><img src="https://i.stack.imgur.com/cbg5G.png" alt="Picture with a magnifying glass overlay"></p> <p>When you hover that picture, I would like it to change to red, as do textual links per my CSS.</p> <p>I have considered several options:</p> <ul> <li>Use a <a href="http://www.fileformat.info/info/unicode/char/1f50d/index.htm" rel="nofollow noreferrer"><code>'LEFT-POINTING MAGNIFYING GLASS' (U+1F50D)</code> character</a>. This wouldn't work for the (fewer and fewer) clients that don't support an extensive set of Unicode characters; but when it works, it's not guaranteed to produce a monochrome character (on Apple implementations, it's a full-color emoji).</li> <li>Use a mask, as <a href="http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css">described in this other similar question</a>. This only works when you don't mind an opaque background (mine is <strong>not</strong> opaque) or when you can tell what's underneath your element with great certainty (and then it's rather hackish and ugly).</li> </ul> <p>My current solution is to use a different picture to represent the white magnifying glass and the red magnifying glass that it changes for when you hover over the picture. It's an okay solution, but I was wondering if there was a way I could have just one picture of just one color, so that I don't have to go back to change the image color if I change my mind about the color.</p> <p>I'm already doing extensive use of CSS3 and HTML5, so I don't mind going deeper as long as it's supported by the latest iterations of each major browser.</p>