How to blur(css) div without blur child element
When using the blur or opacity property, it is not possible to ignore the child element. If you apply either of those properties to parent element, it will automatically apply to child elements too.
There is an alternate solution: create two elements inside your parent div – one div for the background and another div for the contents. Set position:relative on the parent div and set position:absolute; top:0px; right:0px; bottom:0px; left:0px; (or set height/width to 100%) to the child element for the background. Using this method, the content div will not be affected by properties on the background.
Example:
#parent_div {
position: relative;
height: 100px;
width: 100px;
}
#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
filter: blur(3px);
z-index: -1;
}<div id="parent_div">
<div id="background"></div>
<div id="textarea">My Text</div>
</div>If you see the background masking over the content, then use the z-index property to send the background behind the second content div.
How to disable blur on child element?
.enableBlur>* {
filter: blur(1.2px);
}
.disableBlur {
filter: blur(0);
}<div class="enableBlur">
<hr>
qqqqq<br>
<span>qqqqq</span><br>
<hr class="disableBlur">
<div>aaaaa</div>
<div>bbbbb</div>
<div class="disableBlur">DDDDD</div>
<hr>
<img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
<img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
</div>Just create two divisions and adjust their z-indexes and margins such that the division you want to blur lies below the division you want to appear on top.
PS: Don't create division inside a division cause the child inherits the parent's properties.
#forblur {
height: 200px;
width: 200px;
background-color: blue;
margin: auto;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px) -ms-filter: blur(3px);
filter: blur(3px);
z-index: -1;
}
#on-top-container {
margin: auto;
margin-top: -200px;
text-align: center;
height: 200px;
width: 200px;
z-index: 10;
}<div id="forblur">
</div>
<div id="on-top-container">
<p>TEXT</p>
</div>