Создание миниатюр с помощью Overflow

Контролирование размера миниатюр на вашей странице. Т.е. ограничение размера поумолчанию, и показ их полного размера при наведении мышкой.

Это не изменение размера изображения, а только лишь изменение размера его видимой части.



UPD: было оказывается, но да ладно...

Идея заключается в том чтобы поместить изображение в некий контейнер (в данном случае это будет ). Мы задаем размер (высоту и ширину) контейнера (position="relative"). Изображение вставляем внутрь (position="absolute"), используем отрицательные top и left значения чтобы выровнять изображение. У контейнера выставляем overflow значение hidden, это позволяет видеть только ту часть изображения, котрая находится внутри контейнера, остальное будет скрыто. При наведении мыши (a:hover) мы меняем overflow значение на visible и показываем полнуй картинку.



Сдесь я опишу способ как для списка миниатюр так и для одиночных.

в качестве отображения изображения используем стандартный тег:


Стандартные настройки должны выглядеть примерно так: (выставляйте свои значение top left для нужного для вас положения всей картинки)

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;
}


Так же можете выставить парметры положения для каждой картинки свои, или определенное место для отображения всех картинок в списке.

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;
}
.
.
.


Выставляем параметр overflow при наведении мышки

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


Так же вариант для единичной миниатюры:

p.thumb{
float:left;
margin:.5em 0;
margin-right:10px;
border:1px solid #999;
padding:2px;
}
p.thumb a{
display:block;
float:left;
width:100px;
height:100px;
line-height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
p.thumb a img{
float:left;
position:absolute;
top:-20px;
left:-50px;
}
p.thumb a:hover{
overflow:visible;
z-index:1000;
border:none;
}
p.thumb a:hover img{
border:1px solid #999;
background:#fff;
padding:2px;
}


Ну и вывод всего этого:

Список:

• 
• 
• 

Единичный:

Оригинальность идеи принадлежит «Alen Grakalic»