Is it possible to blur only specific part of the image using CSS filter ?

Question

I have a background image and want to blur a specific part of it without effecting the whole image ? For instance, only bottom left side corner, center or top right side corner ? Is it possible to do so?

Answer 1

Unfortunately, using only CSS can't make this happen. You can acheive your goal through putting an extra absolute element in the same container that contains your background image.

Probably something like this.

$(document).ready(function() {
  $('button').click(function(e) {
    $(".blurry").css('background-color', 'white')
      .css('opacity', '.7')
      .css('box-shadow', 'white 0px 0px 20px 20px');
  });
});

.wrapper {
  width:500px;
  height:150px;
  position:relative;  
}

#brand {
  width:500px;
  height:150px;
  display:inline-block;
  background-image:url("https://i.stack.imgur.com/ZeQzt.jpg?s=328&g=1");
  background-repeat: no-repeat;
  background-size: 100%;
}

.blurry {
  width:100px;
  height:50px;
  position:absolute;
  left:30px;
  bottom:25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="wrapper">
    <a id="brand"></a>
    <div class="blurry"></div>
  </div>  
</div>

<button>blur</button>