Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gaussian Blur onHover Using jQuery

I am wondering if there is some way to apply a gaussian blur onto a div using jQuery (or CSS that jQuery can modify). I have looked into blur(), but at least with Safari, it doesn't seem that it accomplishes what I'm looking for. If possible, I want to use fadeIn on the effect, so it blurs gradually.

Thanks for any help!

like image 287
PF1 Avatar asked Dec 27 '09 20:12

PF1


3 Answers

Be aware that Blur is when a DOM-element, such as textboxes (inputs etc.) loses focus, and should not be mixed with the kind of blur you are talking about (gaussian/motion blur).

There is no good cross-browser solution for this problem. You can, however, blur images by using a API such as the one Ben suggests. Or by using this one.

Maybe if you find out a way to draw your div contents to a HTML5 canvas you can then apply the Blur-filter by using Pixastic?

like image 172
Mickel Avatar answered Nov 08 '22 21:11

Mickel


Check out the blur.js plugin for jQuery: http://blurjs.com, it uses my Stack Blur algorithm which I believe is currently the fastest JavaScript based way to blur canvas elements: http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

like image 5
Quasimondo Avatar answered Nov 08 '22 20:11

Quasimondo


filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

content of blur.svg

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

More : http://demosthenes.info/blog/534/Crossbrowser-Image-Blur

like image 4
Armel Larcier Avatar answered Nov 08 '22 21:11

Armel Larcier