2

I am trying to create a group of buttons (think radio buttons) which will be used to display customer satisfaction. I want to have the buttons have images which are gray scale when they are un-selected, and then saturate with a color (ex. change the white in the image to green) when they are selected. I don't want to use two separate images with a :active selector (or other selector) simply because I don't want to have a ton of images cluttering up my already hefty project. I have seen a few answers, for instance using a tag and recoloring each individual pixel, but they seemed incredibly complex and unwieldy. Does anyone know a (relatively) simple way to do this? enter image description here

Siguza
  • 21,155
  • 6
  • 52
  • 89
perennial_
  • 1,798
  • 2
  • 26
  • 41
  • possible repeat question with: http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css – ruslan4kad Jul 05 '15 at 21:25
  • They are similar, however there are a few key differences. I am willing to use jQuery or Javascript, while they were looking specifically for a css method. Also, their accepted response only works in select browsers. – perennial_ Jul 05 '15 at 21:31

2 Answers2

3

You could use CSS Filters, but they're only supported by Chrome and Safari at the moment. 

img:hover {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

You can see a demo here on a jsFiddle: http://jsfiddle.net/rvb250hx/. I'd assume it can be used for radio buttons too.

http://www.paulund.co.uk/css3-image-filters

Billy Purvis
  • 245
  • 2
  • 10
  • I'm not going to accept this as the answer (because I would like an answer which works in all browsers) but this is great and worked perfectly in chrome and safari! I will totally use this if I don't find a better response – perennial_ Jul 05 '15 at 21:21
  • Sure - you could use an opacity filter and a black background which is faded on/off whenever you desire. It's a bit more code, but it would give a similar effect. – Billy Purvis Jul 05 '15 at 21:22
  • http://jsfiddle.net/rvb250hx/1/ Please see the jsFiddle. It kinda gives what you'd like, but I'd recommend using the filters and then this as a CSS fallback? – Billy Purvis Jul 05 '15 at 21:30
  • The only problem with that is that my images will be round with a transparent background, and so the overlay will darken the area around the image weirdly – perennial_ Jul 05 '15 at 21:34
  • You can put a border-radius on the img/overlay. I can't see the poor edges. Transparent background? So, you don't want an image show at all, but when an element is hovered over, the image shows as grey scaled? – Billy Purvis Jul 05 '15 at 21:40
  • I've edited the question with an image to help clarify – perennial_ Jul 05 '15 at 21:51
  • I'm still confused. Though, you could use the single image. 2 eyes, and the mouth within a div and then change the background color of the div. That would do exactly what your images suggest. You'd use jQuery. – Billy Purvis Jul 05 '15 at 21:56
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82496/discussion-between-billy-purvis-and-wookiecoder). – Billy Purvis Jul 06 '15 at 13:05
0

You can just use PNG image with are transparent, so whenever you want to change color you just have to set css for that like.

See [this][1] fiddle link.

  [1]: http://jsfiddle.net/chiragchavda_ks/okkyn431/
chiragchavda.ks
  • 532
  • 7
  • 25