Turn icon into black&white

Question

I have the following icon in my code:

HTML:

<a href="#" id="PickUp" class="PickUpIcon"></a>

CSS:

width: 24px;
height: 24px;
background: url(../images/Icons/Answer.jpg) no-repeat;
cursor: pointer;

and it looks like that: enter image description here

I want (using css, js or jQuery) to turn this icon to something like this: enter image description here

meaning turning the color icon to black&white one, is it possible?

I'm using html 4, CSS2 and IE 8 (I can't use HTML5 or other browsers)

I know I can use 2 different icons but I want to know if there is another possibility since Icons can be added dynamically and I don't want everyone will need to supply 2 icons.

You can do this using 2 images. one for original and one for black/white — TNK, Feb 27 '13 at 09:27
You didnt mention you need both icons at the same time. You can use sprites for this purpose. — Jashwant, Feb 27 '13 at 09:34

score 3 · Accepted Answer · edited May 23 '17 at 10:32

You can do it with SVG

Check this answer https://stackoverflow.com/a/8612047/1033200

<svg xmlns="http://www.w3.org/2000/svg">
 <filter id="grayscale">
  <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
 </filter>
</svg>

Then use this CSS:- [Demo]

img {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}

To disable grayscale on hover you can use:-

img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

score 1 · Answer 2 · edited Jan 10 '14 at 19:08

1

You could use filter: grayscale(100%);, although it's currently supported by Chrome only.

<a href="#" id="PickUp" class="PickUpIcon">
    <img src='https://i.stack.imgur.com/tVNmr.jpg' class="bw" />
</a>

img.bw {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

http://jsfiddle.net/ruslans/ZK3dY/

source

edited Jan 10 '14 at 19:08

Mohsen Safari

6,669
5
42
58

answered Feb 27 '13 at 09:32

Ruslan

9,927
15
55
89

1

How could we apply this to the background image? The OP is including the image as background image and not through an IMG tag. – Ravi Y Feb 27 '13 at 09:34
2

Currently supported in chrome and OP has mentioned he need to support IE8 – Jashwant Feb 27 '13 at 09:37

score 0 · Answer 3 · answered Feb 27 '13 at 09:30

0

    img { 
     filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    }

answered Feb 27 '13 at 09:30

Jacob

3,580
22
82
146

score 0 · Answer 4 · answered Feb 27 '13 at 09:34

I've used this on a few websites before and it should be fully cross-browser compatible:

element { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter:gray;
    -webkit-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray(1);
    filter: grayscale(100%);
}

score 0 · Answer 5 · answered Feb 27 '13 at 09:36

a { 
width: 24px;
height: 24px;
background: url(https://i.stack.imgur.com/tVNmr.jpg) no-repeat;
cursor: pointer;
display: block;
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}

Sample

score 0 · Answer 6 · answered Feb 27 '13 at 09:37

0

You can use CSS sprites.

Works everywhere and used in almost every website.

You can use icon which has both images side by side and show only a portion of image by adjusting background-position and width and height of background-image

answered Feb 27 '13 at 09:37

Jashwant

28,410
16
70
105

score 0 · Answer 7 · answered Feb 27 '13 at 09:38

.PickUpIcon a:hover {
  width: 24px;
  height: 24px;
  background: url(../images/Icons/Answer_grey.jpg) no-repeat;
  cursor: pointer;
}

Where Answer_grey.jpg is your grey image. This is simply way and this work in all browsers. There is better way with add both images (green and grey) to one image and on hover change which part of image you display. This is better because you load with page 1 image and when you on it it´s ok, but if you have 2 image then on hover you seen how this image loading (if this image is large).

Turn icon into black&white

7 Answers7