Image reflection the easy way!

After seeing the nice new reflection effects in some wpf/e examples from Microsoft and other sites that use reflection in their logo. I wanted to start using them on images in my sites. I started by opening photoshop and making the reflection part of the image, then thought there must be an easier and quicker way of doing this.

Well there is...

I came across this site, http://cow.neondragon.net/stuff/reflection/ , which achieves the same result using a small javascript file. Include that on the page then all you need to do is add class="reflect" to the image and you're good to go.

You can change the height of the reflection by adding rheight50 after the reflect ie.

<img src="..." class="reflect rheight50" /> 

Just increase of decrease the number to change the height.

Same thing if you want to change the opacity of the reflection too:

<img src="..." class="reflect ropacity20" /> 

Again, change the number to increase or decrease the opacity.

There are more details in the download, along with full examples. Thats all there is too it. Simple but effective.