JSFiddle - React, Tailwind, and code Playground

by tomthebearded

HTML

<div class="background">
  <img src="https://www.w3schools.com/css/img_5terre.jpg" />
</div>

<div class="foreground mask">
  <div class="blur"></div>
</div>

CSS

.background,
.foreground {
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  top:0;
  position: relative;
  z-index: -1;
}

img {
  width: 100%;
  height: 100%;
}

.mask {
  -webkit-mask-size: 300px;
  -webkit-mask-position-x: 100px;
  cursor:crosshair;
  position: absolute;
  -webkit-mask-image: url('http://i.imgur.com/aVbqejg.png');
  mask-image: url('http://i.imgur.com/aVbqejg.png');
  z-index: 10;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.blur {
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}