[css] Gray out image with CSS?

What's the best way (if any) to make an image appear "grayed out" with CSS (i.e., without loading a separate, grayed out version of the image)?

My context is that I have rows in a table that all have buttons in the right most cell and some rows need to look lighter than others. So I can make the font lighter easily of course but I'd also like to make the images lighter without having to manage two versions of each image.

Considering filter:expression is a Microsoft extension to CSS, so it will only work in Internet Explorer. If you want to grey it out, I would recommend that you set it's opacity to 50% using a bit of javascript.

http://lyxus.net/mv would be a good place to start, because it discusses an opacity script that works with Firefox, Safari, KHTML, Internet Explorer and CSS3 capable browsers.

You might also want to give it a grey border.

Better to support all the browsers:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}

If you don't mind using a bit of JavaScript, jQuery's fadeTo() works nicely in every browser I've tried.

jQuery(selector).fadeTo(speed, opacity);

Better to support all the browsers:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}

Considering filter:expression is a Microsoft extension to CSS, so it will only work in Internet Explorer. If you want to grey it out, I would recommend that you set it's opacity to 50% using a bit of javascript.

http://lyxus.net/mv would be a good place to start, because it discusses an opacity script that works with Firefox, Safari, KHTML, Internet Explorer and CSS3 capable browsers.

You might also want to give it a grey border.

Better to support all the browsers:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}

If you don't mind using a bit of JavaScript, jQuery's fadeTo() works nicely in every browser I've tried.

jQuery(selector).fadeTo(speed, opacity);

To gray out:

“to achromatize.”

filter: grayscale(100%);

@keyframes achromatization {_x000D_
 0% {}_x000D_
 25% {}_x000D_
 75% {filter: grayscale(100%);}_x000D_
 100% {filter: grayscale(100%);}_x000D_
}_x000D_
_x000D_
p {_x000D_
 font-size: 5em;_x000D_
 color: yellow;_x000D_
 animation: achromatization 2s ease-out infinite alternate;_x000D_
}_x000D_
p:first-of-type {_x000D_
 background-color: dodgerblue;_x000D_
}

<p>_x000D_
 ? Bzzzt!_x000D_
</p>_x000D_
<p>_x000D_
 ? Bzzzt!_x000D_
</p>

“to fill with gray.”

filter: contrast(0%);

@keyframes gray-filling {_x000D_
 0% {}_x000D_
 25% {}_x000D_
 50% {filter: contrast(0%);}_x000D_
 60% {filter: contrast(0%);}_x000D_
 70% {filter: contrast(0%) brightness(0%) invert(100%);}_x000D_
 80% {filter: contrast(0%) brightness(0%) invert(100%);}_x000D_
 90% {filter: contrast(0%) brightness(0%);}_x000D_
 100% {filter: contrast(0%) brightness(0%);}_x000D_
}_x000D_
_x000D_
p {_x000D_
 font-size: 5em;_x000D_
 color: yellow;_x000D_
 animation: gray-filling 5s ease-out infinite alternate;_x000D_
}_x000D_
p:first-of-type {_x000D_
 background-color: dodgerblue;_x000D_
}

<p>_x000D_
 ? Bzzzt!_x000D_
</p>_x000D_
<p>_x000D_
 ? Bzzzt!_x000D_
</p>

Helpful notes

• What's the difference between CSS3 filter grayscale and saturate?

• https://www.w3.org/TR/filter-effects-1

You can use rgba() in css to define a color instead of rgb(). Like this: style='background-color: rgba(128,128,128, 0.7);

Gives you the same color as rgb(128,128,128) but with a 70% opacity so the stuff behind only shows thru 30%. CSS3 but it's worked in most browsers since 2008. Sorry, no #rrggbb syntax that I know of. Play with the numbers - you can wash out with white, shadow out with gray, whatever you want to dilute with.

OK so you make a a rectangle in semi-transparent gray (or whatever color) and lay it on top of your image, maybe with position:absolute and a z-index higher than zero, and you put it just before your image and the default location for the rectangle will be the same upper-left corner of your image. Should work.

Here's an example that let's you set the color of the background. If you don't want to use float, then you might need to set the width and height manually. But even that really depends on the surrounding CSS/HTML.

<style>
#color {
  background-color: red;
  float: left;
}#opacity    {
    opacity : 0.4;
    filter: alpha(opacity=40); 
}
</style>

<div id="color">
  <div id="opacity">
    <img src="image.jpg" />
  </div>
</div>

Better to support all the browsers:

img.lessOpacity {               
   opacity: 0.4;
   filter: alpha(opacity=40);
   zoom: 1;  /* needed to trigger "hasLayout" in IE if no width or height is set */ 
}

Considering filter:expression is a Microsoft extension to CSS, so it will only work in Internet Explorer. If you want to grey it out, I would recommend that you set it's opacity to 50% using a bit of javascript.

http://lyxus.net/mv would be a good place to start, because it discusses an opacity script that works with Firefox, Safari, KHTML, Internet Explorer and CSS3 capable browsers.

You might also want to give it a grey border.

Use the CSS3 filter property:

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

The browser support is a little bad but it's 100% CSS. A nice article about the CSS3 filter property you can find here: http://blog.nmsdvid.com/css-filter-property/

If you don't mind using a bit of JavaScript, jQuery's fadeTo() works nicely in every browser I've tried.

jQuery(selector).fadeTo(speed, opacity);

Use the CSS3 filter property:

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

The browser support is a little bad but it's 100% CSS. A nice article about the CSS3 filter property you can find here: http://blog.nmsdvid.com/css-filter-property/

Considering filter:expression is a Microsoft extension to CSS, so it will only work in Internet Explorer. If you want to grey it out, I would recommend that you set it's opacity to 50% using a bit of javascript.

http://lyxus.net/mv would be a good place to start, because it discusses an opacity script that works with Firefox, Safari, KHTML, Internet Explorer and CSS3 capable browsers.

You might also want to give it a grey border.

Here's an example that let's you set the color of the background. If you don't want to use float, then you might need to set the width and height manually. But even that really depends on the surrounding CSS/HTML.

<style>
#color {
  background-color: red;
  float: left;
}#opacity    {
    opacity : 0.4;
    filter: alpha(opacity=40); 
}
</style>

<div id="color">
  <div id="opacity">
    <img src="image.jpg" />
  </div>
</div>

You can use rgba() in css to define a color instead of rgb(). Like this: style='background-color: rgba(128,128,128, 0.7);

Gives you the same color as rgb(128,128,128) but with a 70% opacity so the stuff behind only shows thru 30%. CSS3 but it's worked in most browsers since 2008. Sorry, no #rrggbb syntax that I know of. Play with the numbers - you can wash out with white, shadow out with gray, whatever you want to dilute with.

OK so you make a a rectangle in semi-transparent gray (or whatever color) and lay it on top of your image, maybe with position:absolute and a z-index higher than zero, and you put it just before your image and the default location for the rectangle will be the same upper-left corner of your image. Should work.

Your here:

<a href="#"><img src="img.jpg" /></a>

Css Gray:

img{
    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 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

Ungray:

a:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

I found it at: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Edit: IE10+ does not support DX filters as IE9 and earlier have done, nor does it support a prefixed version of the greyscale filter. You can fix it, use one in two solutions below:

1. Set IE10+ to render using IE9 standards mode using the following meta element in the head: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Use an SVG overlay in IE10 to accomplish the greyscaling internet explorer 10 - howto apply grayscale filter?

Here's an example that let's you set the color of the background. If you don't want to use float, then you might need to set the width and height manually. But even that really depends on the surrounding CSS/HTML.

<style>
#color {
  background-color: red;
  float: left;
}#opacity    {
    opacity : 0.4;
    filter: alpha(opacity=40); 
}
</style>

<div id="color">
  <div id="opacity">
    <img src="image.jpg" />
  </div>
</div>

Your here:

<a href="#"><img src="img.jpg" /></a>

Css Gray:

img{
    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 10+, Firefox on Android */
    filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */}

Ungray:

a:hover img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    filter: none ; /* IE6-9 */
    zoom:1; /* needed to trigger "hasLayout" in IE if no width or height is set */
    -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

I found it at: http://zkiwi.com/topic/chuyen-hinh-mau-thanh-trang-den-bang-css-nhu-the-nao

Edit: IE10+ does not support DX filters as IE9 and earlier have done, nor does it support a prefixed version of the greyscale filter. You can fix it, use one in two solutions below:

1. Set IE10+ to render using IE9 standards mode using the following meta element in the head: <meta http-equiv="X-UA-Compatible" content="IE=9">
2. Use an SVG overlay in IE10 to accomplish the greyscaling internet explorer 10 - howto apply grayscale filter?

Here's an example that let's you set the color of the background. If you don't want to use float, then you might need to set the width and height manually. But even that really depends on the surrounding CSS/HTML.

<style>
#color {
  background-color: red;
  float: left;
}#opacity    {
    opacity : 0.4;
    filter: alpha(opacity=40); 
}
</style>

<div id="color">
  <div id="opacity">
    <img src="image.jpg" />
  </div>
</div>

To gray out:

“to achromatize.”

filter: grayscale(100%);

@keyframes achromatization {_x000D_
 0% {}_x000D_
 25% {}_x000D_
 75% {filter: grayscale(100%);}_x000D_
 100% {filter: grayscale(100%);}_x000D_
}_x000D_
_x000D_
p {_x000D_
 font-size: 5em;_x000D_
 color: yellow;_x000D_
 animation: achromatization 2s ease-out infinite alternate;_x000D_
}_x000D_
p:first-of-type {_x000D_
 background-color: dodgerblue;_x000D_
}

<p>_x000D_
 ? Bzzzt!_x000D_
</p>_x000D_
<p>_x000D_
 ? Bzzzt!_x000D_
</p>

“to fill with gray.”

filter: contrast(0%);

@keyframes gray-filling {_x000D_
 0% {}_x000D_
 25% {}_x000D_
 50% {filter: contrast(0%);}_x000D_
 60% {filter: contrast(0%);}_x000D_
 70% {filter: contrast(0%) brightness(0%) invert(100%);}_x000D_
 80% {filter: contrast(0%) brightness(0%) invert(100%);}_x000D_
 90% {filter: contrast(0%) brightness(0%);}_x000D_
 100% {filter: contrast(0%) brightness(0%);}_x000D_
}_x000D_
_x000D_
p {_x000D_
 font-size: 5em;_x000D_
 color: yellow;_x000D_
 animation: gray-filling 5s ease-out infinite alternate;_x000D_
}_x000D_
p:first-of-type {_x000D_
 background-color: dodgerblue;_x000D_
}

<p>_x000D_
 ? Bzzzt!_x000D_
</p>_x000D_
<p>_x000D_
 ? Bzzzt!_x000D_
</p>

Helpful notes

• What's the difference between CSS3 filter grayscale and saturate?

• https://www.w3.org/TR/filter-effects-1