Image reflection Effect using jquery

Adding reflection to images using jquery is pretty simple using the reflection.js from digitalia.previously in order to create a image reflection effect to images we have to use Photoshop or other editing software to do the trick.This reflection.js adds a reflection to the images onload of the site so prevent the using of photo editing softwares.
Reflection.js is a JavaScript image effect utility available in both jQuery and MooTools.Reflection.js creates a CANVAS element and constructs the reflection within the canvas to the images.Demo

How to integrate
Step1
Add the following script to the head section that is above the closing head tag(</head>)

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

Step2
Add the below jquery function call between the body tag or head tag

document.ready(function() {

var options = { opacity: 0.75 };

$('.reflect').reflect(options);

});

Thats it if you want the effect to take place add a class property to the img like the one below

<img src="abc.jpg" alt="" class="reflect" />

Note:
Using Relection.js for blogger

For blogger/blogspot users theirs a problem in adding reflection.js because the css for images in blogger affects the reflection in order to prevent this you should modify the code in the template.
Goto->layout->Edit html
Find the following code and remove it

 .post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

then find below code and delete the padding property from css rule

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

DEMO