Aug 11, 2010
Image Blur Effect using Jquery and CssAfter the Text blur effect jquery, Today we are here to learn "How to blur images using Jquery?" And "How the imageblur Plugin works?".
IdeaHow jquery can blur image?
It works on very simple idea of creating clone of images with opecity and overlapping them. I tried to shape it as a Jquery plugin($.imageblur();).
Lets me explain, how to impliment it on our web pages to blur images.
You just have to add a id(id="blur") to make a image blur, along with the imageblur jquery plugin.
$.imageblur(); }); </script>
<!-- dont forget to add id - blur -->
<img src="simi.jpg" width="468" height="646" id="blur">
DemoYou can see the working demo here. If you face any browser issue, please let me know in comments. Its working fine with FF and Chrome.
You can download the imageblur plugin from here.
If anything helps, feel free to buy me a beer.
By : Motyar+ @motyar