.container
    .window
    .raindrop
View Compiled
$image: "https://www.w3cplus.com/sites/default/files/blogs/2015/1506/huadenchushang.jpg";

$width:100vw;
$height:100vh;

$raindrops:120;

body{
  background:#222;
}
.container{
  position:relative;
  width:$width;
  height:$height;
  overflow:hidden;
}
.window{
  position:absolute;
  width:$width;
  height:$height;
  background:url($image);
  background-size:cover;
  background-position:50%;
  filter:blur(10px);
}

$drop-width:15px;
$drop-stretch:1.1;
$drop-height:$drop-width*$drop-stretch;

.raindrop{
    position:absolute;
    top:$height/2;
    left:$width/2;
    width:$drop-width;
    height:$drop-height;
    border-radius:100%;
    background-image:url($image);
    background-size:$width*0.05 $height*0.05;
    transform:rotate(180deg);
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.