Turn Black Icons Grey in CSS?

Question

Wondering how these guys at http://sociali.st turn their black icons grey in their CSS ("featured with love by" section). New to this and can't figure it out.

Is their some property to allow me to change black icons to grey ones?

Answer 1

You can do for your own like this:

div{
  background: url(path.jpg) no-repeat;
}
div:hover{
  opacity: .4;
}

And by the way that's good to do with black images.

But if you want to change colorful image to gray then you can use like this:

div:hover{
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"); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

---

If you want to use opacity then see the code for cross-browser compatibility:

 /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;