Gaussian Blur onHover Using jQuery

javascript jquery html css blur
PF1 picture PF1 · Dec 27, 2009 · Viewed 42.6k times · Source

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!

Answer

Mickel picture Mickel · Dec 27, 2009

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?

Related questions

Image blur with CSS/Javascript: is it possible?

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

Read More
Refresh/reload the content in Div using jquery/ajax

I want to reload a div on click of a button. I do not want to reload the full page. Here is my code: HTML: <div role="button" class="marginTop50 marginBottom"> <input type="button" id="getCameraSerialNumbers" value="…

Read More
How to apply !important using .css()?

I am having trouble applying a style that is !important. I’ve tried: $("#elem").css("width", "100px !important"); This does nothing; no width style whatsoever is applied. Is there a jQuery-ish way of applying such a style without having to …

Read More