Создание превью изображения на основе свойства Overflow

Список изображений

Отдельное изображение

Трюк, приведенный в статье, позволит создать нужные нам размеры превью и отображать полный его размер при наведении курсора на превью.

Введение

На самом деле, управлять мы будем не размерами изображения, а размерами области видимости при наведении курсором на изображение. Естественно, реализовать это поможет нам свойство overflow.

Данное свойство определяет, как будет отображаться содержание элемента, когда тот перекроет область содержащего его блока. Если, по той или иной причине, размеры этого блока ограничены, то мы используем свойство overflow, чтобы определить поведение его содержимого. Возможные значения overflow это: visible (видимый), hidden (невидимый), scroll, auto.

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

Реализация

Основная идея в том, чтобы поместить изображение в определенный блок. Т.к. мы говорим о превью, то этим блоком будет служить элемент <a>. Мы установим размеры (ширину и высоту) элемента как нам нужно, и установим свойство позиционирования relative. Также, мы будем использовать отрицательные значения свойств left и top, чтобы "обрезать" изображение. Элементу <a> назначим свойство overflow как hidden, поэтому будет видна только часть изображения, которое мы поместили в блок с фактическими размерами. Остальная его часть будет невидима. Для a:hover мы установим чтобы содержимое блока стало видимым: overflow: visible; и картинка раскроется полностью.

Код

Этот прием можно использовать как для списка изображений, так и для одного изображения, как в примере. Для разметки мы будем использовать стандартные элементы

<ul id="thumbs">
<li><a href=""><img src="image.jpg" mce_src="image.jpg" /></a></li>
</ul>

Правила, для отображения превью в первоначальном виде будут выглядеть так:

ul#thumbs a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}

Правила для элемента <a> содержат значение высоты и ширины так, как нам необходимо в зависимости от дизайна. Свойство overflow определяем как hidden. Теперь мы можем поиграться с отрицательными значениями top и left, чтобы "обрезать" нашу картинку до желаемого размера. Вы также можете предопределить эти значения для каждой картинки в отдельности.

ul#thumbs a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
ul#thumbs li#image1 a img{
top:-28px;
left:-55px;
}
ul#thumbs li#image2 a img{
top:-18px;
left:-48px;
}
ul#thumbs li#image3 a img{
top:-21px;
left:-30px;
}
.
.

Осталось установить значение visible для события, когда курсор будет наведен на картинку.

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

Заметьте, что z-index должен быть определен так, чтобы перекрывать содержимое блока. Это очень важно, т.к. мы хотим, чтобы полное изображение превью отрывалось слоем выше. Иначе вы не получите нужного эффекта.