blur efect

HTML

<div id="id1"  style="position:absolute;display:block;width:60%; height:60%;left:20%;top:20%;">
    <button onclick="mover()">mover</button>
    <h3>Titulo 1</div>
    <hr>
</div>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur">
      <feGaussianBlur stdDeviation="5" />
    </filter>
  </defs>
</svg>

CSS

html,body, #id1::before{
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
    overflow:hidden;
}

h3{
    font-famiy: Arial;
    color:white;
}
}
.move10perc{ left:30% !important;}
body {
    background-image:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28727/pelican.jpg');
    background-size: cover;

}

hr { 
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
} 

.moveR{ left:40% !important;}
#id1{    transition: all 1s; z-index: 3;}

#id1::before  {
  z-index: -1;
  display: block;
  position: absolute;
  content: ' ';

}
#id1::before {

 background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28727/pelican.jpg');
    background-attachment: fixed;
  -webkit-filter: url('#blur');
  filter: url('#blur');
  -webkit-filter: blur(5px);
  filter: blur(5px);
  background-size: cover;
  opacity: 0.9;
}

JavaScript

function mover(){
   $('#id1').toggleClass('moveR');
   // $("#id1").animate({left: "30%"});
}