reflection.js: How to Add an Attractive Semi-transparent Reflection to Images

In modern web development, visual appeal plays a crucial role in grabbing users’ attention and encouraging them to stay on your site longer. By adding a beautiful reflection to images, you can significantly enhance the overall appearance of your website.
In this article, we will introduce how to display a semi-transparent, inverted shadow on images using the JavaScript library reflection.js.

Preparing with CSS

First, let’s set up some basic CSS to display the images nicely. Here, we’ll configure the margin and padding of the entire site to 0 and center-align the headings and images. Specifically, we’ll introduce how to use the `clWrap` class to center the images.

<style type="text/css" media="all">
<!--
body{
    margin:0;
    padding:0;
}
h1{
    text-align:center;
    font-size:18px;
    font-weight:bold;
    padding:10px 0;
    line-height:1.4em;
    text-align:center;
}
.clWrap{
    width:800px;
    margin:0 auto;
    text-align:center;
}
-->
</style>

This CSS provides the base styles for your site. Next, we’ll move on to adding the inverted shadow to the images using JavaScript.

Adding Image Reflection Effect with JavaScript

First, load the `mootools.js` and `reflection.js` files. Before using `reflection.js`, you need to load the `mootools.js` dependency. By utilizing these libraries, you can easily add inverted shadows to images.

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="reflection.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
    var options = { height: 0.5 };
    $$('img.reflect').each(function(img) {
        img.reflect(options);
    });
});
</script>

This script displays a reflection shadow at half the height of the images (height: 0.5) within the page. Here, we’re adding a shadow that is half the height of all images with the img.reflect class. You can customize the height of the inverted shadow through the options object.

Reflecting Images in HTML

To apply the effect, simply specify the `reflect` class for the image to which you want to apply the JavaScript-defined reflection. Here’s an example:

<div class="clWrap">
    <h1>Displays a semi-transparent shadow by reflecting a single jpg image.</h1>
    <div align="center"><img src="i1.jpg" alt="Images that display shadows" class="reflect" /></div>
</div>

All you need to do is apply the reflect class to the target img tag. In this code snippet, an image with the reflect class is placed within a div with the clWrap class. This automatically adds an inverted shadow to the specified image.

reflection.js: Demo Page with Semi-transparent Reflection for Images

For a practical demonstration of how to use `reflection.js`, please refer to the demo page. By applying this technique, you can make portfolio sites or product images more attractive. However, one thing to note is that adding shadows might slightly increase the page load time, so be mindful of the number and size of the images you use.
reflection.js: Demo with Semi-transparent Reflection

Source: Image Reflection with jQuery and MooTools

Source: Image Reflection with jQuery and MooTools

Conclusion

The visual elements of a website are crucial for capturing user interest. By using `reflection.js`, you can easily add beautiful, inverted shadows to your images, significantly enhancing the overall look of your site. I hope this article contributes to your web development and visual design efforts.

※Please use this content at your own discretion. Do not copy the Google Analytics tag from the demo page’s head section.