Gray out image with CSS

Question

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Does it have to be gray  You could just set the opacity of the image lower  to dull it   Alternatively  you could create a  lt div gt  overlay and set that to be gray  change the alpha to get the effect     html    lt div id  wrapper  gt       lt img id  myImage  src  something jpg    gt   lt  div gt   css    myImage       opacity  0 4      filter  alpha opacity 40      msie          or      wrapper       opacity  0 4      filter  alpha opacity 40      msie        background-color   000

User · Answer

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    lt style gt   color     background-color  red    float  left    opacity          opacity   0 4      filter  alpha opacity 40       lt  style gt    lt div id  color  gt     lt div id  opacity  gt       lt img src  image jpg    gt     lt  div gt   lt  div gt

User · Answer

To gray out      to achromatize      filter  grayscale 100       x000D   x000D   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    x000D   lt p gt  x000D     Bzzzt  x000D   lt  p gt  x000D   lt p gt  x000D     Bzzzt  x000D   lt  p gt  x000D   x000D   x000D       to fill with gray      filter  contrast 0       x000D   x000D   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    x000D   lt p gt  x000D     Bzzzt  x000D   lt  p gt  x000D   lt p gt  x000D     Bzzzt  x000D   lt  p gt  x000D   x000D   x000D      Helpful notes   What  39 s the difference between CSS3 filter grayscale and saturate  https   www w3 org TR filter-effects-1

User · Answer

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    lt style gt   color     background-color  red    float  left    opacity          opacity   0 4      filter  alpha opacity 40       lt  style gt    lt div id  color  gt     lt div id  opacity  gt       lt img src  image jpg    gt     lt  div gt   lt  div gt

User · Answer

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

User · Answer

Does it have to be gray  You could just set the opacity of the image lower  to dull it   Alternatively  you could create a  lt div gt  overlay and set that to be gray  change the alpha to get the effect     html    lt div id  wrapper  gt       lt img id  myImage  src  something jpg    gt   lt  div gt   css    myImage       opacity  0 4      filter  alpha opacity 40      msie          or      wrapper       opacity  0 4      filter  alpha opacity 40      msie        background-color   000

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    lt style gt   color     background-color  red    float  left    opacity          opacity   0 4      filter  alpha opacity 40       lt  style gt    lt div id  color  gt     lt div id  opacity  gt       lt img src  image jpg    gt     lt  div gt   lt  div gt

User · Answer

Does it have to be gray  You could just set the opacity of the image lower  to dull it   Alternatively  you could create a  lt div gt  overlay and set that to be gray  change the alpha to get the effect     html    lt div id  wrapper  gt       lt img id  myImage  src  something jpg    gt   lt  div gt   css    myImage       opacity  0 4      filter  alpha opacity 40      msie          or      wrapper       opacity  0 4      filter  alpha opacity 40      msie        background-color   000

User · Answer

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    lt style gt   color     background-color  red    float  left    opacity          opacity   0 4      filter  alpha opacity 40       lt  style gt    lt div id  color  gt     lt div id  opacity  gt       lt img src  image jpg    gt     lt  div gt   lt  div gt

User · Answer

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

User · Answer

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

User · Answer

To gray out      to achromatize      filter  grayscale 100       x000D   x000D   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    x000D   lt p gt  x000D     Bzzzt  x000D   lt  p gt  x000D   lt p gt  x000D     Bzzzt  x000D   lt  p gt  x000D   x000D   x000D       to fill with gray      filter  contrast 0       x000D   x000D   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    x000D   lt p gt  x000D     Bzzzt  x000D   lt  p gt  x000D   lt p gt  x000D     Bzzzt  x000D   lt  p gt  x000D   x000D   x000D      Helpful notes   What  39 s the difference between CSS3 filter grayscale and saturate  https   www w3 org TR filter-effects-1

User · Answer

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

User · Answer

Does it have to be gray  You could just set the opacity of the image lower  to dull it   Alternatively  you could create a  lt div gt  overlay and set that to be gray  change the alpha to get the effect     html    lt div id  wrapper  gt       lt img id  myImage  src  something jpg    gt   lt  div gt   css    myImage       opacity  0 4      filter  alpha opacity 40      msie          or      wrapper       opacity  0 4      filter  alpha opacity 40      msie        background-color   000

User · Answer

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

User · Answer

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

User · Answer

Your here    lt a href     gt  lt img src  img jpg    gt  lt  a gt    Css Gray   img      filter  url  data image svg xml utf8  lt svg xmlns   http   www w3 org 2000 svg   gt  lt filter id   grayscale   gt  lt 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    gt  lt  filter gt  lt  svg gt  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  lt svg xmlns   http   www w3 org 2000 svg   gt  lt filter id   grayscale   gt  lt feColorMatrix type   matrix   values   1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0    gt  lt  filter gt  lt  svg gt  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    Set IE10  to render using IE9 standards mode using the following meta element in the head   lt meta http-equiv  X-UA-Compatible  content  IE 9  gt  Use an SVG overlay in IE10 to accomplish the greyscaling internet explorer 10 - howto apply grayscale filter

User · Answer

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

User · Answer

Your here    lt a href     gt  lt img src  img jpg    gt  lt  a gt    Css Gray   img      filter  url  data image svg xml utf8  lt svg xmlns   http   www w3 org 2000 svg   gt  lt filter id   grayscale   gt  lt 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    gt  lt  filter gt  lt  svg gt  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  lt svg xmlns   http   www w3 org 2000 svg   gt  lt filter id   grayscale   gt  lt feColorMatrix type   matrix   values   1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0    gt  lt  filter gt  lt  svg gt  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    Set IE10  to render using IE9 standards mode using the following meta element in the head   lt meta http-equiv  X-UA-Compatible  content  IE 9  gt  Use an SVG overlay in IE10 to accomplish the greyscaling internet explorer 10 - howto apply grayscale filter

[css] Gray out image with CSS?

Examples related to css