<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
</head>
<body>
<div id="carousel">
<div class="item" style="top: 30px;left: 320px;">
<img src="http://freeimagesarchive.com/data/media/131/1_images.jpg" />
<div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam purus mauris, semper a feugiat in, ullamcorper sed enim. Aenean pretium tincidunt leo sed egestas. Phasellus viverra sem tristique odio malesuada auctor. Aenean ultricies vestibulum tortor eu convallis.</div>
</div>
<div class="item" style="top: 200px;left: 40px;">
<img src="http://www.random-images.com/image/obj21geo38pg1p5.jpg" />
<div class="description">Quisque facilisis rutrum risus, quis consectetur metus eleifend ut. Pellentesque porttitor, elit sit amet lobortis hendrerit, urna orci ultrices turpis</div>
</div>
<div class="item" style="top: 500px;left: 300px;">
<img src="http://www.nasa.gov/images/content/174735main_LEFTFullDisk.jpg" />
<div class="description">sit amet fermentum orci erat sit amet lorem. Pellentesque quis odio neque. Donec vitae diam urna, at sollicitudin nunc.</div>
</div>
<div class="item" style="top: 400px;left: 700px;">
<img src="http://www.lbto.org/images/Astronomical_Images/Holmes_V.jpg" />
<div class="description">Vestibulum posuere imperdiet molestie. Curabitur semper mauris at elit posuere vel suscipit orci vehicula. Vivamus in massa urna</div>
</div>
<div class="item" style="top: 150px;left: 650px;">
<div class="description">vitae gravida lectus. Aliquam vitae pharetra tortor. Vestibulum bibendum blandit risus, in tristique nulla rhoncus id. Nam malesuada felis felis.</div><img src="http://www.crystalxp.net/galerie/img/img-images-fractal-cloud-cebeul-8721.jpg" />
</div>
</div>
<script>
(function() {
var current = '';
$('#carousel .item').click(function() {
if (current != '') {
var top = current.data('top');
var left = current.data('left');
current.find('.description').hide();
current.animate({top: top, left: left, width: '250px', height: '150px'}, 2000, function() {
$(this).css('z-index', '1');
});
current.find('img').animate({width: '250px', height: '150px'}, 2000);
}
$(this).data('top', $(this).css('top'));
$(this).data('left', $(this).css('left'));
$(this).animate({top: '200px', left: '300px', width: '400px', height: '300px'}, 2000, function() {
$('.description', this).show();
$(this).css('z-index', '5');
});
$('img', this).animate({width: '400px', height: '300px'}, 2000);
current = $(this);
});
})();
</script>
<style>
#carousel {
position: relative;
}
.item, .item img {
width: 250px;
height: 150px;
position: absolute;
top: 0px;
left: 0px;
z-index: 1
}
.item {
position: absolute;
cursor: pointer;
}
.item .description {
z-index: 10;
position: relative;
display: none;
}
</style>
</body>
</html>