How to Blur(Css) Div Without Blur Child Element

How to blur(css) div without blur child element

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>

how do i blur the div only and not its elements

Unfortunately, if you blur (or use transparancy) on an element, this will effect all child elements as well.

The only way around this is to take the contents of the blurred box and place it as a sibling. Than use some CSS to position it on top.

remove blur effect on child element

Create a div inside content & give bg image & blur effect to it. & give it z-index less the the opacity div, something like this.

<div class="content">
    <div class="overlay"></div>
    <div class="opacity">
        <div class="image">
            <img src="images/zwemmen.png" alt="Sample Image" />
        </div>
        <div class="info">
             a div wih all sort of information
        </div>
    </div>
</div>

Use Css

.content{
    float: left;
    width: 100%;
}

.content .overlay{
    background-image: url('images/zwemmen.png');
    height: 501px;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    z-index:0;
}

.opacity{
    background-color: rgba(5,98,127,0.9);
    height:100%;
    overflow:hidden;
    position:relative;
    z-index:10;
}

Remove blur effect from child element with relative position

You should add the background as div next to actions div not as parent div.

Try this

 .overlay {      position: absolute;     top: 0;     left: 0;     right: 0;     bottom: 0;   }  .mdl-card__actions {     z-index: 2;  }

<body>    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"><script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<div class="remo-card-image mdl-card mdl-shadow--2dp">     <div class="overlay" style="background:url(https://www.allaboutbirds.org/guide/assets/og/75335251-1200px.jpg) center / cover;filter: blur(5px);z-index: 0;"></div>  <div class="mdl-card__title mdl-card--expand"></div>        <div class="mdl-card__actions">      <span class="remo-card-image__filename">        <button> 278728</button>      </span>       </div>  </div>

is there a way to override -webkit-filter: blur in a child element?

I've updated your JSFiddle

    <body>
      <div class="wrap">
        <div class="bgImageContainer"></div>
        <div class="content"> Some text and stuff here</div>
      </div>
    </body>

Unfortunately, you cannot target just the background image in CSS3. The way to do this is to wrap everything as siblings, but the blurred element definitely needs to be a sibling of the non blurred element. Any child of the blurred element will be blurred. Hope this helps!

Disable Blur filter on child containers

A few notes:

there is no background HTML tag,
when you are applying filters remember to not only use the -webkit-
there is no font-face attribute to declare the font you are using, instead you should use font-family

With this in mind, a solution for your problem is creating a empty child div and applying the filter to that same empty div which must have a lower z-index then its siblings (as you already had)

Here is a snippet:

@font-face {  font-family: "Candy";  src: url('font/Candy.otf') format("opentype");}@font-face {  font-family: "DancingScript";  src: url('font/DancingScript.ttf') format("truetype");}body {  margin: 0;  padding: 0;}div {  position: absolute;  background: url("http://rusticrentals.oldtreasuresfurniture.com/images/cover_page.jpg") no-repeat;  display: block;  height: 100%;  width: 100%;  z-index: 0;  -moz-filter: blur(10px);  -o-filter: blur(10px);  -ms-filter: blur(10px);  filter: blur(10px);}
header {  font-family: "Candy";  font-size: 150px;  text-align: center;  color: #FFF;}nav {  color: #FFF;  font-family: "DancingScript";  font-size: 25px;}nav ul {  list-style: none;  margin: 0;  padding: 0;}nav li {  display: inline-block;}header,nav {  display: block;  position: relative;  z-index: 9999;}

<main>  <div></div>  <header>Rustic Rentals</header>  <nav>    <ul>      <li>Rentals</li>      <li>Sales</li>      <li>Contact</li>    </ul>  </nav></main>

How to Blur(Css) Div Without Blur Child Element