title: remove blur effect on child element
body: <p>I have a <code>&lt;div&gt;</code> with an background-image with blur effect.</p>
  
  <pre><code>-webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  </code></pre>
  
  <p>The only problem is that all the Child elements also get the blur effect. Is it possible to get rid of the blur effect on all the child elements??</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;div class="opacity"&gt;
          &lt;div class="image"&gt;
              &lt;img src="images/zwemmen.png" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="info"&gt;
               a div wih all sort of information
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
      .content{
          float: left;
          width: 100%;
          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);
      }
  
      .opacity{
          background-color: rgba(5,98,127,0.9);
          height:100%;
          overflow:hidden;
      }
  .info{
      float: left;
      margin: 100px 0px 0px 30px;
      width: 410px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/6V3ZW/" rel="noreferrer">http://jsfiddle.net/6V3ZW/</a></p>