CODEWITHSUNDEEP
jqueryhtmlcss
nick
nick

Reputation: 3239

fullscreen overlay with css/jquery

i'm trying to make a "huge" div that fills all the viewport with opacity 0.4 or whatever. The problem is how to do it. I tried making a div with all my page content inside and give it this properties:

.div{
  width:100%;
  height:100%;
  background:#000;
  opacity:0.5;
}

since that didn't work, i tried to add z-index and put a high value but it didn't work either. any idea? i want to make something like this:

enter image description here

Upvotes: 9

Views: 23112

Answers (2)

Dev Man
Dev Man

Reputation: 2137

try this

HTML

<div class="div_out">
  <div class="div_in">the content in this div will be placed above the overlay</div>
</div>

CSS

.div_out{
width:100%;
height:100%;
background:#000;
opacity:0.5;
position:fixed;//you forgot from this point
top:-22px;
left:-22px;
margin-top:22px;
margin-left:22px;
}
.div_in{
 width:90%;
 height:90%;
 margin:0 auto;     
 margin-top:1.5%;
 background color:white;
 }

Upvotes: -1

Justin
Justin

Reputation: 1329

I think you're looking for something like this:

The CSS:

#fade-wrapper {
    display: none;
    position: fixed;
    height: 100vh;
    width: 100vw;
    background: rgba(0, 0, 0, 0.5);
}

Here's a fiddle: http://jsfiddle.net/hTQb8/1/

Upvotes: 19

Related Questions