Похоже на аккордеон - при наведении происходит, как бы раздвигание шторок и мы видим полное изображение. Все изображения должны иметь одинаковый размер и по ширине и по высоте.

Разметка HTML

В примере используется 5 изображений молодой актрисы...остолбеней

<div id="container">
    <div id="img_container">
        <img id="img1" src="img/01.jpg"/>
        <img id="img2" src="img/02.jpg"/>
        <img id="img3" src="img/03.jpg"/>
        <img id="img4" src="img/04.jpg"/>
        <img id="img5" src="img/05.jpg"/>
    </div>
</div>

CSS

Между изображениями используем box-shadow, чтобы отделить их визуально друг от друга:

#container {
    margin: 0 auto;
    margin-top: 50px;
    width: 800px;
    height: 350px;
    overflow: hidden;
    border: 10px solid #000;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}
#img_container {
    width: 4000px;
}
#img_container img {
    position: relative;
    -moz-box-shadow: -5px 0 10px #000;
    -webkit-box-shadow: -5px 0 10px #000;
    box-shadow: -5px 0 10px #000;
    width: 600px;
}
#img1 { z-index: 0; }
#img2 { z-index: 1; }
#img3 { z-index: 2; }
#img4 { z-index: 3; }
#img5 { z-index: 4; }

javascript

Не забываем подключить библиотеку jQuery. А теперь сам скрипт:

$(document).ready(function() {
    var cwidth = parseInt($("#container").css("width").replace("px", ""));
    var img_count = $("#img_container").children().length;
    var img_width = $("#img1").width();
    var divider = cwidth / img_count;
    var small_space = (cwidth - img_width) / (img_count - 1);

    // set position
    var cssleft = Array();
    $("#img_container img").each(function(index) {
        cssleft[index] = new Array();
        // set default position
        cssleft[index][0] = (index * divider) - (index * img_width);
        $(this).css("left", cssleft[index][0] + "px");

        // set left position
        cssleft[index][1] = (index * small_space) - (index * img_width);

        // set right position
        var index2 = index;
        if (index2 == 0) {
            index2++;
        }
        cssleft[index][2] = cssleft[index2 - 1][1];
    });

    // image hover
    $("#img_container img").mouseenter(function() {
        var img_id = parseInt($(this).attr("id").replace("img", "")) - 1;

        if ($(this).attr("id") != "img1") {
            $(this).animate({
                left: cssleft[img_id][1]
            }, 300);
        }
        loopNext(this);
        loopPrev(this);
    });

    // image container hover out back to default position
    $("#img_container").mouseleave(function() {
        $("#img_container img").each(function(index) {
            $(this).animate({
                left: cssleft[index][0]
            }, 300);
        });
    });

    function loopPrev(el) {
        if ($(el).prev().is("img")) {
            var imgprev_id = parseInt($(el).attr("id").replace("img", ""));

            if ($(el).prev().attr("id") != "img1") {
                $(el).prev().animate({
                    left: cssleft[imgprev_id - 2][1]
                }, 300);
            }
            loopPrev($(el).prev());
        }
    }

    function loopNext(el) {
        if ($(el).next().is("img")) {
            var imgnext_id = parseInt($(el).attr("id").replace("img", ""));

            $(el).next().animate({
                left: cssleft[imgnext_id][2]
            }, 300);
            loopNext($(el).next());
        }
    }
});

СКАЧАТЬСкачек: 701
293,28 Kb
Кто скачал?

ДЕМОПосмотреть
пример