По просьбам пользователей после прочтения статьи Визуализация данных на CSS Цель данной статьи заключается в том, чтобы реализовать возможность создания превью для изображения, размеры которого можно устанавливать самостоятельно. Бывает так, что у нас нет свободного места на странице, чтобы показать превью картинки полностью. Но и делать из картинок обрезки не хочется. Трюк, приведенный в статье, позволит создать нужные нам размеры превью и отображать полный его размер при наведении курсора на превью.
Введение
На самом деле, управлять мы будем не размерами изображения, а размерами области видимости при наведении курсором на изображение. Естественно, реализовать это поможет нам свойство
overflow.Данное свойство определяет, как будет отображаться содержание элемента, когда тот перекроет область содержащего его блока. Если, по той или иной причине, размеры этого блока ограничены, то мы используем свойство
overflow, чтобы определить поведение его содержимого. Возможные значения overflow это:visible (видимый), hidden (невидимый), scroll, auto. Первых двух комбинаций вполне достаточно, чтобы реализовать нашу идею.
В принципе, мы будем делать следующее: скрывать часть полного превью изображения, когда оно не задействовано, и показывать его полностью, когда наведен курсор.
Реализация
Основная идея в том, чтобы поместить изображение в определенный блок. Т.к. мы говорим о превью, то этим блоком будет служить элемент
. Мы установим размеры (ширину и высоту) элемента как нам нужно, и установим свойство позиционирования relative. Также, мы будем использовать отрицательные значения свойств left и top, чтобы «обрезать» изображение. Элементу назначим свойство overflow как hidden, поэтому будет видна только часть изображения, которое мы поместили в блок с фактическими размерами. Остальная его часть будет невидима. Для a:hover мы установим чтобы содержимое блока стало видимым: overflow: visible; и картинка раскроется полностью.
Код
Этот прием можно использовать как для списка изображений, так и для одного изображения, как в примере. Для разметки мы будем использовать стандартные элементы
Правила, для отображения превью в первоначальном виде будут выглядеть так:
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;
}
Правила для элемента содержат значение высоты и ширины так, как нам необходимо в зависимости от дизайна. Свойство 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 должен быть определен так, чтобы перекрывать содержимое блока. Это очень важно, т.к. мы хотим, чтобы полное изображение превью отрывалось слоем выше. Иначе, вы не получите нужного эффекта.
Комментарии
Конечно, устанавливать значения вручную совсем не обязательно, да и тяжеловато, если речь идет о галерее изображений или портфолио. В статье показана лишь реализация идеи как таковой. Однако, если вам всегда необходимо «обрезать» превью так, чтобы видна была только центральная часть, то можно воспользоваться такой формулой:
пусть width1 – реальный размер превью,
width2 – размер, который нужно отображать (в ul#thumbs a)
padding – отступы у картинки, или абзаца, как в примере.
Тогда для значения left формула будет выглядеть так:
Value = (width1 - width2) / 2 + padding
Для top формула аналогична, нужно лишь заменить width на height
Также, если пользоваться данной формулой и добавить для ul#thumbs a:hover:
left: -1px; (обычно размер border..)
top: -1px;
то можно избежать эффекта смещения изображения на несколько пикселей при наведении курсором на превью.
Пример реализации можно посмотреть здесь или скачать архив
