-1

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:

Picture with a magnifying glass overlay

When you hover that picture, I would like it to change to red, as do textual links per my CSS.

I have considered several options:

  • Use a 'LEFT-POINTING MAGNIFYING GLASS' (U+1F50D) character. 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).
  • Use a mask, as described in this other similar question. This only works when you don't mind an opaque background (mine is not opaque) or when you can tell what's underneath your element with great certainty (and then it's rather hackish and ugly).

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.

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.

Community
  • 1
  • 1
zneak
  • 134,922
  • 42
  • 253
  • 328
  • Have you considered using SVG instead of a PNG? You could adjust the `fill` property on the fly with CSS. – lukiffer Oct 26 '13 at 23:53
  • @lukiffer, I guess I could, but it's not a vector image (though I could spend some time to make a vector version). – zneak Oct 26 '13 at 23:54
  • 1
    Also, check out http://fortawesome.github.io/Font-Awesome/ - it has a few magnifying glass icons out of the box and is a generally useful approach, even if you're not using bootstrap. In that case you would just adjust the `color` property. – lukiffer Oct 26 '13 at 23:55
  • Yeah, Font Awesome is incredible. You'd love it for something like this. It's supported in old IE browsers, too. – Kate McCubbins Oct 27 '13 at 00:47

1 Answers1

0

Fiddle with the numbers on this to get your color.

img.magnify:hover {
  filter: hue-rotate(20deg);
  -webkit-filter: hue-rotate(20deg);
  -moz-filter: hue-rotate(20deg);
  -o-filter: hue-rotate(20deg);
  -ms-filter: hue-rotate(20deg);
}

Found here - more options available

Deryck
  • 7,608
  • 2
  • 24
  • 43
  • That's nice, but it support is lacking. Firefox can't do any filter as of now. (On a side note, it probably be more than rotating the hue to get from white to red.) – zneak Oct 27 '13 at 00:51
  • There's also saturation to adjust. But I know the support is slim, just wanted to give you something in case you didnt find anything else – Deryck Oct 27 '13 at 01:01