Gray out image with CSS?

user_26842 0
Viewed 248451

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.

css
9 Answers

Does it have to be gray? You could just set the opacity of the image lower (to dull it). Alternatively, you could create a <div> overlay and set that to be gray (change the alpha to get the effect).

  • html:

    <div id="wrapper">
    <img id="myImage" src="something.jpg" />
</div>

  • css:

    #myImage {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
}

/* or */

#wrapper {
    opacity: 0.4;
    filter: alpha(opacity=40); /* msie */
    background-color: #000;
}
Owen_48530

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_43760

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 */ 
}
alexmeia_365870

To gray out:

“to achromatize.”

filter: grayscale(100%);


@keyframes achromatization {
 0% {}
 25% {}
 75% {filter: grayscale(100%);}
 100% {filter: grayscale(100%);}
}

p {
 font-size: 5em;
 color: yellow;
 animation: achromatization 2s ease-out infinite alternate;
}
p:first-of-type {
 background-color: dodgerblue;
}
<p>
 ⚡ Bzzzt!
</p>
<p>
 ⚡ Bzzzt!
</p>

“to fill with gray.”

filter: contrast(0%);


@keyframes gray-filling {
 0% {}
 25% {}
 50% {filter: contrast(0%);}
 60% {filter: contrast(0%);}
 70% {filter: contrast(0%) brightness(0%) invert(100%);}
 80% {filter: contrast(0%) brightness(0%) invert(100%);}
 90% {filter: contrast(0%) brightness(0%);}
 100% {filter: contrast(0%) brightness(0%);}
}

p {
 font-size: 5em;
 color: yellow;
 animation: gray-filling 5s ease-out infinite alternate;
}
p:first-of-type {
 background-color: dodgerblue;
}
<p>
 ⚡ Bzzzt!
</p>
<p>
 ⚡ Bzzzt!
</p>

Helpful notes

user_45100330

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>
user_353410

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.

VonC_63090
Related