This file demonstrates some of the things reflection.js does.

Coloured Backgrounds

The reflections should fade into the background colour.

Varying Heights

Using the class attribute, the height of the reflection can be varied. The first image uses the class "rheight20" which shows a reflection 20% the height of the image. The next one uses rheight40, then rheight60, and so on.

Varying Opacities

This time each reflection has a varying opacity starting from 20% going up to 80%.

Floated Image with Border

The image and the reflection should be aligned to the right of the page. The border should display around both the image and reflection.

Scripted Reflection

These reflections do not have the class="reflect" attribute. They uses the Reflection.add() function.

The reflection should become brighter when the mouse is placed over the image.

Click the image to add a reflection.

Remove Reflection

Using Reflection.add(), you can vary the amount of reflection.

Vary the reflection opacity (10% opacity)

Scaled Images

This may look strange in Internet Explorer.

Clickable Images

If everything looks as it should, Reflection.js is working correctly!