<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("img").mouseenter(function() {
var
self = this,
clone = self.__clone = self.__clone || $(self).clone(false);
$(self).before(clone);
clone.css({position: "absolute", "z-index": 1000}).stop().animate({
width: "300px",
marginLeft: "-100px"
},{
duration: 100
}).mouseleave(function() {
clone.stop().animate({
width: "100px",
marginLeft: "0px"
}, {
duration: 100,
complete: function() {
$(this).remove();
self.__clone = null;
}
});
});
});
});
</script>
<style>
img {
width: 100px;
height: auto;
margin: 0 5px;
}
li {
position: relative;
float: left;
display: block;
width: 110px;
}
</style>
<ul>
<li><img src="http://copypast.ru/uploads/posts/1218050576_image00001.jpg" /> </li>
<li><img src="http://ru.fishki.net/picsw/042009/30/bonus/kitty/004_kitty.jpg" /> </li>
<li><img src="http://ru.fishki.net/picsw/042009/30/bonus/kitty/013_kitty.jpg" id="picture"/> </li>
<li><img src="http://doseng.org/uploads/posts/2008-09/1221463151_cat_01.jpg" /> </li>
<li><img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR-VVYIs6o4-qAl2F-Q6yaQxYf1yaNd3HpRXWBYarHWHmo5gnxg_A" /> </li>
<li><img src="http://votrube.ru/uploads/posts/2009-05/1241301872_kotjatki-%28www.votrube.ru%291.jpg" /> </li>
</ul>