Image Reflection with jQuery and MooTools

By  on  

Christina Ricci

One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. Unfortunately creating image reflections within your graphics application can be time-consuming, especially when an image can potentially change frequently. Luckily Christophe Beyls has created Reflection.js.

Reflection.js is a JavaScript utility available in both jQuery and MooTools that creates reflections for any images in a page. Reflection.js creates a new IMG element with special filters if the client is using IE -- if the client is not IE, Reflection.js creates a CANVAS element and constructs the reflection within the canvas.


<img src="cricci-player.jpg" alt="Christina Ricci" class="reflect" />

Add the reflect CSS class to any image you'd like to reflect.

The MooTools JavaScript Usage

window.addEvent('domready',function() {
	var options = { height: 0.5 };
	$$('img.reflect').each(function(img) {

The MooTools version of Reflection.js implements the reflect method to create reflections.

The jQuery JavaScript Usage

	document.ready(function() {
		var options = { opacity: 0.75 };

Much like MooTools method, you execute each element's reflect method.

Christophe's Reflection.js code is a great piece of work! Don't waste time making reflections in Photoshop -- use the power of JavaScript!

Track.js Error Reporting

Upcoming Events

Recent Features

  • CSS Animations Between Media Queries

    CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

  • 9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • Digg-Style Dynamic Share Widget Using MooTools

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

  • CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...


  1. Haha! I was wondering where Christina had gone…

  2. @Chris the Developer: She’s never gone! :)

  3. Thx for the share, very useful script!
    Always wanted to know a possibility to do client-side reflections… ;)

  4. I agree with you that reflection.js is a great piece of code but… in my machine doesn’t work! :)
    I use mootools-1.2.4 via google api and other plugins.
    I found a solution, replace line 53:

    wrapper = new Element(($(img.parentNode).get("tag") == "a") ? "span" : "div").injectAfter(img).adopt(img, reflection);


    var parentNode = $(img.parentNode);
    if (parentNode != null) {
      wrapper = new Element((parentNode.get("tag") == "a") ? "span" : "div").injectAfter(img).adopt(img, reflection);
    else {
      wrapper = new Element("div").injectAfter(img).adopt(img, reflection);

    And… it seems to work! :)

    My two cents.

  5. I was really hoping this post would be “Introducing Scroll”

  6. Ah, I knew I had seen that script somewhere… when you mentioned Christophe Beyls, I knew I was right!

    Great sum up of the usage of the script. I personally prefer the demo provided by Christophe – more dynamic and such… though the muse is more hairy :D.

  7. nice post, great job, you made it come true. I think that’s what I am looking for.

    Your site is nice, too!

  8. Wow, didn’t know that it can be done coding. I was doing it in photoshop and stuff. Good tip, thanx

  9. @Nickolas Simard: Hairy muses FTL.

  10. abhay

    My client has said to me add refelection in about 300 images i know but i forgot it heopls meawesome it is so easy to understand thankyouuuuuuu very much.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!