JavaScript Image Effects Library

A look at some JavaScript techniques for creating cool image effects — reflections, glossy overlays, and hover effects — without Photoshop.

1. Reflection Effect (reflection.js)

Creates a CSS mirror reflection below any image automatically.

// Include reflection.js, then add class="reflect" to images
<img src="photo.jpg" class="reflect" alt="Photo" />

Or programmatically:

Reflection.reflect(document.getElementById('myImg'), {
    height: 0.4,   // Reflection height as fraction of image
    opacity: 0.4   // Reflection opacity
});

2. Glossy Overlay with Canvas

function addGloss(img) {
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);

    // Add gradient overlay
    var grad = ctx.createLinearGradient(0, 0, 0, img.height * 0.6);
    grad.addColorStop(0, 'rgba(255,255,255,0.4)');
    grad.addColorStop(1, 'rgba(255,255,255,0)');
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, img.width, img.height);

    img.src = canvas.toDataURL();
}

3. Hover Zoom with jQuery

$('img.zoomable').hover(
    function() { $(this).stop().animate({ width: '+=20', height: '+=20', marginLeft: '-=10', marginTop: '-=10' }, 200); },
    function() { $(this).stop().animate({ width: '-=20', height: '-=20', marginLeft: '+=10', marginTop: '+=10' }, 200); }
);