Freelance Web Developer

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?". 


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.



<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() {


<!-- dont forget to add id blur -->
<img src="simi.jpg" width="468" height="646" id="blur">


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.


You can download the imageblur plugin from here.

Labels: , , , ,

By :