class for a blurry effect

blur.css

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg"><filter id="blur"><feGaussianBlur in="SourceGraphic" stdDeviation="5" /></filter></svg>#blur');
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
  -webkit-transform: translateZ(0);
  -webkit-transform: preserve-3d;
  -webkit-perspective: 1000
}

.ie .blur {
  -ms-filter: blur(5px);
  filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=16, direction=40) progid:DXImageTransform.Microsoft.Blur(pixelradius=8)
}

.ie .blur * {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50) !important;
  opacity: 0.5 !important
}

.ie8 .blur, .ie9 .blur {
  height: 100%;
  filter: progid:DXImageTransform.Microsoft.MotionBlur(strength=16, direction=40) progid:DXImageTransform.Microsoft.Blur(pixelradius=8)
}

.ie8 .blur *, .ie9 .blur * {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50) !important
}