Галерея рубашек

Интересный и простой эффект, который можно использовать на сайте интернет магазина. Полноразмерные изображения помещаются в контейнер DIV меньшего размера. Изображение центрируется, но не показывается полностью, так как параметр overflow:hidden - в состоянии включен. При наведении мыши на картинку, overflow:hidden переходит в состояние выключен и рубашка показывается полностью.

HTML

<div id="content">
    <div class="row">
        <div class="teebox">
           <a href="#"><img src="overlay.png"/></a><img src="pinktee.png"/>
           <div class="caption">$10</div>
        </div>
    </div>
</div>

CSS

*{
    margin:0;
    padding:0;
}
img{
    border: none;
}
body {
    text-align: center;
    background: #222;
}
h2{
    color: #333;
    font:italic 36px Georgia, serif;
    padding: 20px;
    border-bottom: dashed 1px #999;
    clear: both;
}
#content{
    width: 100%;
    margin: 0px auto;
    background: #fff;
    text-align: center;
    margin-bottom: 50px;
}
.row{ /*Container for each row of shirts*/
    width: 495px;
    margin: 0px auto;
    clear:both;
    padding: 20px 0;
}
.teebox{
    overflow: hidden; /*Prevents excess of image from showing*/
    position: relative;
    margin: 0 10px;
    width: 144px; /*Width and height define thumbnail size*/
    height: 183px;
    float: left;
    clear: right;
    z-index: 0;
}
.selected{
    overflow: visible; /*Display part of image that not currently visible*/
    z-index: 10;
}

.teebox img {
    left:-84px; /*Use this number to center your image when not hovered*/
    position: absolute;
}
.teebox a{ /*Area that changes to selected class when hovered over*/
    display:block;
    position: relative;
    float: left;
    left: 84px; /*Use to line up the overlay image*/
    z-index: 1;
}
.caption{
    color: #2FB5FF;
    font:14px Arial;
    position: relative;
    float: left;
    left: 0px;
    top: 146px;
    padding: 10px;
    background: #222;
    z-index: 1;
}

JS

В шапке подключаем библиотеку jQuery.
И вызываем код:

$(document).ready(function() {
    $(".teebox a").mouseover(function(){
        $(this).parent().addClass("selected");
        $(this).find('img').animate({opacity: "0.0"}, 0); //Hides overlay
        $(this).parent().find('.caption').hide(); //Hides Caption
    }).mouseout(function(){
        $(this).parent().removeClass("selected");
        $(this).find('img').animate({opacity: "1.0"}, 0); //Shows overlay
        $(this).parent().find('.caption').show(); //Shows Caption
    });
});