Aug 11, 2010

Image Blur Effect using Jquery and Css

After the Text blur effect jquery, Today we are here to learn "How to blur images using Jquery?" And "How the imageblur Plugin works?". 

Idea

How 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.

Code

JavaScript/Jquery

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="imageblur_1.0.js"></script>
<script type="text/javascript">

$(document).ready(function() {

   //usage

   $.imageblur();
});
</script>

HTML

<!-- dont forget to add id - blur -->

<img src="simi.jpg" width="468" height="646" id="blur">
 

Demo

You 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.

Download

You can download the imageblur plugin from here.

Labels: Animation, css, jquery, plugin, Tutorials

By : Motyar+ @motyar