Rohan Büchner Rohan Büchner - 2 months ago 18
CSS Question

Bootstrap overlay (on screen subsection)

I have a screen that looks as follows. So far I've been hiding the content behind the overlay when there is a an http request, but what I actually want is to have the overlay screen... well be over the content and not have to hide the layout underneath because it looks terrible. It seems like the underlying elements are for lack of a better term, breaking through.

enter image description here

Thus my question:


How does one go about creating an overlay with the content behind the
overlay looking faded / blurred? Is this meant to be achieved by other
means? I'd ultimately be happy for the underlying content not to look
like its on top of the modal (E.G the words faded and blurry should be
taken with a pinch of salt)


Word of warning, I'm no web designer by any means, my CSS skills are "hacky" at best (but improving, so I know my way around the basics), but I'd like to understand why what I'm doing is not working? (as to not be a total noob forever)

I've created a small working sample demonstrating my problem.



.overlay {
width: 100%;
height: 100%;
background: grey;
border-radius: 5px;
position: relative;
}
.overlay .overlay-modal {
line-height: 200px;
border-radius: 5px;
z-index: 11;
margin: 0 auto;
}
.overlay .overlay-modal p {
background-color: #f1c40f;
width: 300px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 120px;
color: white;
border-radius: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
<br/>
<div class="container-fluid">
<div class="col-md-2 sidebar well">
Some Menu
</div>
<div class="col-md-6 main">

<div class="container-fluid overlay">
<div class="overlay-modal">
<p><i class="fa fa-gear fa-spin"></i>
</p>
</div>

<div class="row">
<div class="col-md-12">
<h3>Employee</h3>
<p class="well">
Content
</p>
<p class="well">
Content
</p>
</div>
</div>

</div>
</div>
<div class="col-md-4 main">
Other content
</div>
<div>




Answer

Ok, let me see, check if is that what you want:

just add z-index: 1; at .overlay .overlay-modal p { will make the content be behind the overlay. For the blur effect you can add that:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
 filter: blur(5px);

on the .row { class.