<p> Drag circles close to one another to see effect</p>
<div id="container">
<div draggable="true" class="resizable"></div>
  <div draggable="true" class="resizable"></div>
  <div draggable="true" class="resizable"></div>
  <div draggable="true" class="resizable"></div>
</div>
/*IMPORTANT*/
#container{
   background: #fff; /*sets the base colour for the contrast*/
   -webkit-filter: contrast(30);
   filter: contrast(30);
  /*the contrast effect is not applied outside of the container and becomes just a blur*/
}
#container div{
  background: #000;
  -webkit-filter: blur(15px);
  filter: blur(15px);
}




/* UNIMPORTANT */
body{
  padding: 2em;
  text-align: center;
}
p{
  font-size: 2em;
  margin: 1em 0;
}
#container{
     border: 1px solid #000;
     position: relative;
     height: 70vh; 
}
#container div{
border-radius: 50%;
  width: 150px;
  height: 150px;
  top: 60px;
  left: 0;
  position: absolute;
}
#container div:nth-of-type(1){
  left: 100px;
}
#container div:nth-of-type(2){
  left: 200px;
}
#container div:nth-of-type(3){
  left: 400px;
}
$('#container div').draggable();

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js