Image blur with CSS/[removed] is it possible?

Question

Is it possible to add a blur effect to an image using CSS and Javascript?

Answer 1

StackBlur works: Here's how I'm using it: also, works on all browsers and ipad!! unlike webkit!!

download StackBlur v5.0 from here: StackBlurv5.0

HTML

CSS

#top {                      
  border-radius:         28%;
  -o-border-radius:      28%;
  -webkit-border-radius: 28%;
  -moz-border-radius:    28%;
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 40;
  width: 208px;
  height: 208px;
}

JS

var topCan = document.getElementById("top");
var toptx  = topCan.getContext("2d");
toptx.drawImage(_specimenImage, 0, 0);
var blur   = 0;

blur       = Math.abs(_sliderF.getPosition(8, -8)); //this returns multiple values 
                                                    //based on a new slider position

stackBlurCanvasRGB("top", 0, 0, topCan.width, topCan.height, blur);

NOTES: Radius values for the stackBlurCanvasRGB function can range from I think 100 to -100.. just play with values, you'll get it working. ..CanvasRGB works faster than CanvasRGBA on iPad.. least that's what I'm noticing on iPad 4th gen.