How to blur(css) div without blur child element (and without absolute)

Question

.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;
}

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

If I do not want to blur the button, what do I need to do?

I would like to solve the problem without resorting to absolute positioning

Answer 1

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>