With Moo.flection you can easily add a Javascript/CSS based cross-browser reflection with true transparency to you images.

It’s based on the Mootools Javascript Framework.

Version number is 0.1 since it’s far from finished. A lot of options for implementation should be added and the code has to be optmized for a real release.

Implementation

You will need mootools v1.1 or higher and moo.flection.js
Example 1

This is the most simple and basic version. All images within any type of block element with the ID ‘reflections’ will gain a nicereflection.

// create a new instance for reflections.
var myReflection = new Reflection(
 'simple_reflection',
); 

HTML:

So if we have an image with the following Javascript, CSS and HTML:
Javascript:

// create a new instance for reflections.
var myReflection = new Reflection(
 'css_copied_reflection',
);  

CSS:

.funnyimage {
 float: left;
 margin: 50px 10px 30px 20px;
 padding: 5px;
 background: #ff0;
 border: 3px solid #f00;
 border-right: 5px dotted #0f0;

}   

HTML:

Demo: http://www.setragasj.nl/mooflection/
Download: http://www.setragasj.nl/mooflection/js/moo.flection.js
Source: http://www.setragasj.nl/mooflection/