<ul id="gallery">
<li><a href="" title="Фото 1"><img src="spring.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 2"><img src="spring2.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 3"><img src="spring3.jpg" width="100" height="100" alt="" /></a></li>
<li><a href="" title="Фото 4"><img src="spring4.jpg" width="100" height="100" alt="" /></a></li>
…
</ul>

#gallery{
    list-style-type: none;
    height: 1%;
    width: 500px;
    margin: 0 auto;
    font-size: 0.75em;
    margin-bottom: 20px
}
#gallery:after{ /* Чтобы список «охватывал» вложенные элементы */
    content:"";
    display:block;
    clear:both
}
    #gallery li{
        margin:0 10px 10px 0;
        float:left
    }
        #gallery li a{
            position:relative;
            display:block;
            float:left;
            width:110px;
            height:110px;
            text-decoration:none
            }
        #gallery li img{
            padding:4px;
            background:#f0f0f0;
            border:solid 1px #ddd;
            position:absolute;
            left:0;
            top:0;
            -ms-interpolation-mode:bicubic /* Для нормального масштабирования изображений в IE6 и 7 */
        }
        #gallery li span{
            display:block;
            padding:5px;
            background:#f0f0f0;
            color:#666;
            position:absolute;
            top:-35px;
            left:-35px;
            width:170px
        }

#gallery li a:hover{
    z-index:100;
    display:inline
}
    #gallery li a:hover img{
        left:-40px;
        top:-40px;
        width:180px;
        height:180px
    }
    #gallery li a span{
        opacity:0.7; /* Если нужно сделать блок с информацией прозрачным */
        filter:alpha(opacity=70); /* Прозрачность в IE */
        visibility:hidden;
        cursor:pointer
    }
    #gallery li a:hover span{
        visibility:visible
    }

$(document).ready(function(){
    $("#gallery a").hover(function() {
        $(this).css({'z-index' : '10'});
        $(this).find('img').stop()
        .animate({
            top: '-40px',
            left: '-40px',
            width: '180px',
            height: '180px'
        }, 400);
        $(this).append('<span>' + this.title + '</span>');
        $(this).find('span').hide();
        $(this).find('span').fadeIn(500);
        }, function() {
        $(this).css({'z-index' : '0'});
        $(this).find('img').stop()
        .animate({
            top: '0',
            left: '0',
            width: '100px',
            height: '100px'
        }, 250);
        $(this).find('span').remove();
    });
});