Gray Out a Section of an Image with CSS

Gray out image with CSS?

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;
  }
  

Gray out a section of an image with CSS

Pure CSS Solution with no extra markup

JSFIDDLE DEMO

HTML

<div class="image-container">
    <img class="image-grey" src="http://placekitten.com/200/150" />
</div>

CSS

.image-container {
    position:relative;
    display:inline-block;
}

.image-grey {
    display:block;
    -webkit-filter: grayscale(100%);
}

.image-container:after {
    position:absolute;
    content:"";
    top:0;
    left:50%;
        width:50%;
    height:100%;
    background-image:url(http://placekitten.com/200/150);
    background-position:top right;
}

Gray out part of image

you could play with a pseudoelement and a RGBA background, e.g.

#mydiv {
   background: url(http://www.psdgraphics.com/file/cherry-wood.jpg); 
   width: 250px;
   height: 400px;
   position: relative;
}

#mydiv:before {
   content: "";
   position: absolute;  
   top: 0;
   left: 0;
   height: 100%;
   width: 30%;
   background: rgba(255,255,255, .3);
}

Codepen: http://codepen.io/anon/pen/OyVYwe

---

Or you could simply add a transparent left border to the element, e.g.

box-sizing: border-box;
background-origin: border-box;
border-left: 50px rgba(255,255,255, .3) solid;

Codepen: http://codepen.io/anon/pen/ZbGNqL

---

Or you could use an inset box-shadow

box-shadow: 80px 0 0 0px rgba(255, 255, 255, .2) inset;

Codepen: http://codepen.io/anon/pen/avOrXE

How to grey out a box in CSS

Create another div that sits on top of #message-box with an opacity of say, 50% and a background-color of gray. When you need to, just show this overlay div. A demo is forthcoming.

Here's a nice demo to show you what I'm talking about. This approach also has the benefit (if, as I assume, you're attempting to 'disable' the message div) of prevent any clicks from reaching the div below it, which effectively disables the below div.

$(document).ready(function() {  $("#myDiv").click(function() {    $("#overlay").show();  });});

#myDiv {  width: 100px;  height: 100px;  background-color: yellow;  margin: 50px 50px;  padding: 10px;}
#overlay {  display: none;  position: absolute;  width: 100px;  height: 100px;  background-color: gray;  top: 50px;  left: 50px;  padding: 10px;  opacity: .8;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="myDiv">  <p>Some text</p>  <input type="button" value="A button" /></div>
<div id="overlay"></div>

How to gray out a HTML element

Lower the opacity.

<table class="grayout">
    ...
</table>

.grayout {
    opacity: 0.6; /* Real browsers */
    filter: alpha(opacity = 60); /* MSIE */
}

How to completely gray out an image with css?

It sounds like you are trying to change the actual pixels in an image. I believe what you are looking for is something like.

Pixastic (coloradjust)

https://github.com/jseidelin/pixastic

http://www.pixastic.com/lib/docs/actions/coloradjust/

or PaintbrushJS (colour tint)

https://github.com/mezzoblue/PaintbrushJS

http://mezzoblue.github.com/PaintbrushJS/demo/

---

Related Topics