Want to Make the Whole Page in Grayscale Except Specified Div

How can I grey out page except for one element?

Can do it using css box-shadow.

.box{display:inline-block; width:100px; height:100px; margin-top:50px; text-align:center; padding-top:2em}.box.selected{    box-shadow: 0 0 0 99999px rgba(0, 0, 0, .5);}

<div class="box">Box 1</div><div class="box">Box 2</div><div class="box selected">Box 3</div><div class="box">Box 4</div>

Apply grayscale on div except one of it's child element

When a filter is applied it is not possible to ignore to the child elements.
The alternate solution is.

.gray{  position:absolute;  top:0;  left:0;  right:0;  bottom:0;  background-color:purple;  filter: grayscale(100%);  z-index:-1;}.exclude{  background-color:yellow;  width:inherit;  height:30px;  top:10px;  position:absolute;  }

<div id="parent_div" style="position:relative;height:100px;width:100px;">  <div class="gray" ></div>  <div class="exclude"></div></div>

Firefox: How to Grayscale an Entire Page without breaking fixed-positioned elements?

What if you apply the filter to body > *? Less performant, but may solve this issue. I admit to not fully considering new issues it may raise, but I can't think of a scenario in which it would alter the containing block of second depth elements.

Make a parent div webkit-filter not affect children

This is not a problem of properties inheritance, as you can think.

The way filters work makes that imposible to fix changing attributes in the CSS: The element affected by the filter is rendered, all the children are rendered, and then the result (as an image) has the filter applied.

So the only alternatives left are:

1) Change the HTML, as Lowkase suggested

2) In your case, seems that all you want to make gray is the background image. In this case, you can leave the HTML as is, display the image in a pseudo element, and apply the filter to this pseudo element.

CSS

.cell{
    opacity:0.7;
    width:420px;
    height:420px;
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

.A1 {
    position: relative;
}
.A1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-image:url('http://i.imgur.com/NNKxZ5R.jpg');
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: blur(15px); /* Google Chrome, Safari 6+ & Opera 15+ */ 
    z-index: -1;
}

#text {
    color:#ffffff;
    text-align:center;
    font:18px sans serif;
    text-decoration:none;
}
.cell:hover {
    opacity:1.0;
}

.A1:hover:before {
    filter: none;
    -webkit-filter: grayscale(0);
    transition: opacity .3s ease-in-out;
    -moz-transition: opacity .3s ease-in-out;
    -webkit-transition: opacity .3s ease-in-out;
}

fiddle

I have also changed your filter to blur to make it more clear the the text is not affected by the filter. Since you had also some opacity set, the text still looked grayish just because you were seeing the gray under it.

Added example using brightness filter (for webkit)

demo 2

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>

---

Related Topics