Увеличение миниатюры при наведении курсора

Часто бывает, пользователь хочет разглядеть изображение лучше, но в силу маленькой неподвижной картинки это невозможно. Однако вы можете позволить такое удовольствие гостю на своем сайте, всего лишь добавив эффект overflow. Тогда при наведении курсора на изображение, оно будет моментально увеличиваться до своего  настоящего размера. И обратите внимание, оно при этом не будет открываться в новом окне. Этот приме просто необходим на сайтах интернет магазинов. Ну, и любому другому сайту такая функция придаст большего удобства.

Используемый код не увеличивает само изображение. При наведении курсора, происходит изменение блока под изображением. Для этого нужно поколдовать над свойством CSS overflow.

Каждое изображение нужно поместить в тег а:

<a href="><img src="photo.jpg"></a>

Тут изображение изменять не надо. Лучше сделать это через CSS. Например, для картинки величиной 120x150 px и ее миниатюрой 100x100 px код выглядит так:

ul#thumbnail a{
    width:100px;
    height:100px;
    line-height:100px;
    display:block;
    float:left;
    overflow:hidden;
    position:relative;
    z-index:1;
}

ul#thumbnail a img{
    top:-20px;
    left:-50px;
    float:left;
    position:absolute;
}

Значения top и left — отрицательные. Вам нужно поиграть с числами, чтобы вышло изображение с нужным размером. Строка overflow:hidden предназначена для скрывания всех отрицательных размеров.
Для перекрытия миниатюры реальным изображением, когда наводится на нее курсор, добавьте код:

ul#thumbnail a:hover{
    z-index:1000;
    border:none;
    overflow:visible;
}

Так выглядит пример.