Reflection

Reflection allows to add fantastic reflection effects to your images in modern browsers. This template includes Reflection.js for mootools which is an improved version of the original Reflection.js script. So you don t need to spend time in an image editor creating reflections.

Usage

Reflections can be added to any image tag over any kind of background (even image backgrounds!). Add a class="reflect" attribute to any image tag.

For example:

<img class="reflect" title="my caption" src="image.jpg" width="240" height="180" />

You can apply multiple classes to an image (separated by spaces), the script will detect if “reflect” is one of them.

CSS limitations
When adding the reflection effect, the script wraps the image inside a block and adds the reflection to the same block, just below the original image. The class and style attributes of the image will be set blank and applied to the div instead, so the whole block will show like the original image.