тот прием можно использовать как для списка изображений, так и для одного изображения, как в примере. Для разметки мы будем использовать стандартные элементы.
<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 должен быть определен так, чтобы перекрывать содержимое блока. Это очень важно, т.к. мы хотим, чтобы полное изображение превью отрывалось слоем выше. Иначе, вы не получите нужного эффекта.