jsFiddle

• Run again
• Edit this fiddle

• Result
• JavaScript
• HTML
• CSS

/*
 * jquery.elementStacks.
 * Stacks elements/images on top of each other with a funky transition.
 *
 * Jquery version of http://mootools.net/forge/p/elementstack
 * by Oskar Krawczyk (http://nouincolor.com).
 *
 * Copyright (c) 2010 Marco Fucci
 * http://www.marcofucci.com/tumblelog/15/mar/2010/elementstack_v1-1/
 *
 * Licensed under MIT
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Launch  : January 2010
 * Version : 1.1
 * Released: 10th Jan, 2010
 */

//START PLUGIN
(function($) {
    var defaultStuckWithItemFunc = function(wrapper, opts) {
        var selector = [opts.itemsSelector, ":"];
        if (opts.stuckWithItem == 'first' || opts.stuckWithItem == 'last') {
            selector.push(opts.stuckWithItem);
        } else {
            selector.push("eq(", opts.stuckWithItem, ")");
        }
        return $(selector.join(""), wrapper)
    };
    
    $.fn.elementStacks = function(options) {
        var opts = $.extend({}, $.fn.elementStacks.defaults, options);

        return this.each(function() {
            var pos, collapsed = false, stackItems = $(opts.itemsSelector, this).css({'z-index': 10});

            var $that = this;
            stackItems
                .each(function(index, img) {
                    $(img)
                        .attr('coords', this.offsetTop + ':' + this.offsetLeft)
                        .css({'top' : this.offsetTop, 'left' : this.offsetLeft });
                })
                .css({'position': 'absolute'})
                .click(function(e) {
                    var $this = $(this);
                    
                    if (!$this.attr('coords')) {
                        return;
                    };
                    
                    collapsed = !collapsed;
                    var target = (collapsed) ?
                        (
                            (opts.stuckWithItem != null) ?
                                $((jQuery.isFunction(opts.stuckWithItem) ?
                                     opts.stuckWithItem : defaultStuckWithItemFunc
                                ).call(this, $that, opts)) : $this
                        ).css({'z-index': 100}) : null;
                    $this.one('stackfinished', function() {
                        if (!target) {
                            stackItems.css({'z-index': 10});
                        }
                    });
                    stackItems.each(function(index, stackItem) {
                        setTimeout(function() {
                            $.fn.elementStacks.reStack.call($this, $(stackItem), collapsed, opts, target, index, index == stackItems.length -1);
                        }, opts.delay * index);
                    });
                });
            
            if (opts.initialCollapse) {
                $(opts.itemsSelector + ":eq(0)", $that).click();
            }
        });
    };
    
    $.fn.elementStacks.defaults = {
        'itemsSelector': 'img',
        'rotationDeg': 20,
        'delay': 40,
        'duration': 900,
        'transaction': 'swing',
        'stuckWithItem': null, //null, 'first', last', function or index of the stuck element (0-based)
        'initialCollapse': false //true if you want the initial state to be collapsed
    };
    
    $.fn.elementStacks.random = function(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    };
    
    $.fn.elementStacks.reStack = function(stackItem, collapsing, options, target, index, last) {
        var coords = (target ? target : stackItem).attr('coords').split(':');
        var rand = (collapsing ? $.fn.elementStacks.random(-options.rotationDeg, options.rotationDeg) : 0);
    
        var $that = this;
        stackItem.css({
            '-webkit-transform': 'rotate(' + rand + 'deg)',
            '-moz-transform': 'rotate(' + rand + 'deg)'
        }).animate({
                top: parseInt(coords[0]) + rand,
                left: parseInt(coords[1]) + rand
            }, options.duration,
            options.transaction,
           function() {
               if (last) {
                   $that.trigger('stackfinished');
               }
           }
        );
    };
})(jQuery);
//END PLUGIN


/*
 *    Easing Plugin (http://gsgd.co.uk/sandbox/jquery/easing/)
 *    NOT required but recommended.
*/
jQuery.extend(jQuery.easing, {
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
});


//Usage
$('#wrapper').elementStacks({
    'transaction': 'easeOutBack',
    'initialCollapse': true
});

Click on one of the images ...
<div id="wrapper">
<img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_m.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2305/2464064429_2310ab60b2_m.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2143/2769889963_7d51ce2702_m.jpg" />
<img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" />
<img width="75" height="75" src="http://farm1.static.flickr.com/251/459884041_92ae9dcc0f_m.jpg" />
<img width="75" height="75" src="http://farm1.static.flickr.com/214/459884021_17921233c5_m.jpg" />
<img width="75" height="75" src="http://farm1.static.flickr.com/191/459792641_2771d6afa0_m.jpg" />
<img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_s.jpg" />
<img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" />


</div>
<a href="http://www.marcofucci.com/tumblelog/15/mar/2010/elementstack_v1-1/" target="_blank">find out more</a>

body {
    background-color: #000;
    font-family: "Georgia", "Times New Roman", serif;
    font-size: .8em;
    color: #fff;
    text-align: center;
    text-shadow: 0 -1px 0 #000;
}

h1 {
    font-size: 1.7em;
    line-height: 150%;
}

#wrapper {
    position: relative;
    height: 320px;
    width: 280px;
    margin: 15px auto;
}

img {
    position: relative;
    float: left;
    padding: 0;
    margin: 5px;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    border: solid 2px #FFFAF2;
    border-bottom: solid 15px #FFFAF2;
    -webkit-transition: -webkit-transform 0.20s ease-in-out;
    -moz-transition: -moz-transform 0.20s ease-in-out;
}

a {
    color: #FFFFFF
}