Add Reflection To Images With Reflection.js

Today we’re going to be adding reflections to images via the jQuery library plugin known as Reflection.js.

Reflection.js for jQuery is a neat little library enabling you to easily add reflections to any image you could want in the easiest way possible. Reflection.js used to be a standalone library but has since been updated to a proper jQuery plugin to make usage even simpler and easier. You can find the library here, on the creator’s website.

Reflection Demo

Tutorial:

The first step towards creating our reflections is to add our image. The image can be any image, as long as the display property is set to block, and not to any of the inline options. If it is set wrongly, it will be reset to display: block;. For this example we’re going to be using the image below:

<img class="eindhoven" src="http://i.imgur.com/pQzVYQh.png" alt="" />

Next we’re going to add some CSS to the image using the class we added to the image.
Note that the Reflection.js places the image in a div along with the reflection canvas and moves the classes and ids to the surrounding div, so we will need to add another css selector for an img element inside the class.

.eindhoven, .eindhoven img
{
float: left;
width: 500px;
}

Once we have all the html and css set up, we can simply call the library’s main function to add a reflection to our image. If you don’t want to or can’t add a bit of javascript for every image you want to add a reflection to you can simply give it the reflect class and it will automatically apply the reflection with the default settings.

$(".eindhoven").reflect();

You can customize the reflection further by setting the options in .reflect(option) as seen below:

$(".eindhoven").reflect({height: 0.6, opacity: 0.75});

You can find a working codepen demo of this tutorial here, in case you want to try this library out a bit more before using it.

 

Leave a Reply

Your email address will not be published. Required fields are marked *