Введение
В основе этого способа лежит не фактическое изменение размера изображения, а изменение его видимой области, с помощью свойства overflow
. Это свойство влияет на отображение содержимого, в случае если это содержимое превышает размеры родительского контейнера. Если контейнер имеет ограниченный размер, по той или иной причине, то используется это свойство чтобы определить, что произойдет. Свойство overflow
может принимать следующие значения: visible
, hidden
, scroll
и auto
. В этом примере мы будем использовать значение hidden, чтобы скрыть часть изображения, и visible чтобы сделать эту часть видимой при наведении указателя мыши.
Концепция
Идея заключается в том, чтобы разместить изображение в определенном контейнере. Поскольку мы говорим об изображениях, то в роли такого контейнера будет выступать элемент . Делаем контейнер блочным, указываем необходимые размеры (ширина и высота) и устанавливаем относительное позиционирование. Изображение внутри контейнера имеет абсолютное позиционирование и отрицательные левый и верхний отступы.
Код
Этот способ можно применять как для одного, так и для нескольких изображений.
‹a href="#"><img src="image.jpg" alt="Мое изображение" /></a›
CSS свойства для определения позиции изображения выглядят примерно так:
a{
display:block;
float:left;
width:100px;
height:100px;
overflow:hidden;
position:relative;
z-index:1;
}
a img{
position:absolute;
top:-20px;
left:-50px;
}
Если вы хотите использовать изображения разных размеров, вы можете указать отступы непосредственно для каждого изображения:
a img{
position:absolute;
top:-20px;
left:-50px;
}
a#image1 img{
top:-28px;
left:-55px;
}
a#image2 img{
top:-18px;
left:-48px;
}
a#image3 img{
top:-21px;
left:-30px;
}
.
.
.
И, наконец, прописываем свойства, чтобы изображение стало видимым при наведении мыши:
a:hover{
overflow:visible;
z-index:1000;
border:none;
}
Как вы заметили для обоих состояний контейнера используется свойство z-index
. www.alexilin.ru/ispolzovanie-z-index/ Это важно, поскольку при наведении указателя нам нужно расположить изображение выше чем соседние изображения. В противном случае способ будет работать не корректно.
Пользуйтесь…
Оригинал: Create Resizing Thumbnails Using Overflow Property
cssglobe.com/post/1305/create-resizing-thumbnails-using-overflow-property
скачать исходники http://cssglobe.com/lab/overflow_thumbs/overflow_thumbs.zip