Backdrop blur and filter

by kmouse

HTML

<div class="container">
  <div class="box"><img width="150" src="https://static.seekingalpha.com/cdn/s3/uploads/getty_images/1360554439/image_1360554439.jpg?io=getty-c-w640"></div>
  <div class="box back_blur"></div>
</div>

<div class="container filter">
  <div class="box"><img width="150" src="https://static.seekingalpha.com/cdn/s3/uploads/getty_images/1360554439/image_1360554439.jpg?io=getty-c-w640"></div>
  <div class="box back_blur"></div>
</div>

CSS

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}

.container {
  display: flow-root;
  position: relative;
}

.filter {
  filter: opacity(0.999);
}

.box {
  background: #fff8;
  width: 280px;
  height: 170px;
  margin: 50px 0;
  padding: 15px;
  box-sizing: border-box;
  position: relative;
	left: 250px;
}

.back_blur {
  position: absolute;
  backdrop-filter: blur(50px);
  top: 50px;
  left: 180px;
  background: transparent;
}

JavaScript

$(function() {
  $(".box").draggable();
});