Этот пример покажет вам как можно реализовать простое увеличение изображений с помощью свойства overflow. Иногда на странице не хватает места для размещения полноразмерных изображений, но в тоже время не хочется ограничиваться маленькими превью. Данный способ позволяет ограничить размер изображений, а при наведении указателя мыши показывать их в полном размере.
В основе этого способа лежит не фактическое изменение размера изображения, а изменение его видимой области, с помощью свойства overflow. Это свойство влияет на отображение содержимого, в случае если это содержимое превышает размеры родительского контейнера. Свойство overflow может принимать следующие значения: visible, hidden, scroll и auto. В этом примере мы будем использовать значение hidden, чтобы скрыть часть изображения, и visible чтобы сделать эту часть видимой при наведении указателя мыши.
Идея заключается в том, чтобы разместить изображение в определенном контейнере. Поскольку мы говорим об изображениях, то в роли такого контейнера будет выступать ссылка. Делаем контейнер блочным, указываем необходимые размеры и устанавливаем относительное позиционирование. Изображение внутри контейнера имеет абсолютное позиционирование и отрицательные левый и верхний отступы.
Этот способ можно применять как для одного, так и для нескольких изображений.
1 | <a href="#"><img src="image.jpg" alt="Мое изображение" /></a> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | a{ display:block; float:left; width:100px; height:100px; overflow:hidden; position:relative; z-index:1; } a img{ position:absolute; top:-20px; left:-50px; } |
Если вы хотите использовать изображения разных размеров, вы можете указать отступы непосредственно для каждого изображения:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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; } . . . |
И, наконец, прописываем свойства, чтобы изображение стало видимым при наведении мыши:
1 2 3 4 5 | a:hover{ overflow:visible; z-index:1000; border:none; } |
Как вы заметили для обоих состояний контейнера используется свойство z-index. Это важно, поскольку при наведении указателя нам нужно расположить изображение выше чем соседние изображения.
Оригинал: Create Resizing Thumbnails Using Overflow Property
хорошая идея, но в общем случае всё-равно надо ресайзить программно, потому что иначе если оригинал намного больше видимой области, то смысл от таких немасштабируемых превьюшек нулевой
Мдя.. это конечно всё работает хоть как-то красиво если:
1) на исходном изображении есть осмысленный участок, который можно в превью выделить.
2) разрешение исходного изображение не больше разрешения экрана, иначе вы просто больше на сайте ничего не увидите
3) да и вообще слишком много если….
Сама техника интересная (впрочем и давно известная), но имеет уж слишком много ограничений…
Безусловно, это не стандарт использования CSS, только лишь пример как можно использовать стили.
>на исходном изображении есть осмысленный участок, который можно в превью выделить.
Ресайзить изменяя пропорции картинки — типично программисткий подход. Таким образом мы получаем совершенно бесполезные уменьшенные картинки. ИМХО оставлять «осмысленный участок» единственный и правильный путь создания thumbnails.
Техника отличная
akella — вовсе нет. я например использую два варианта — уменьшение по фиксированной высоте с сохранением пропорций, вырезание квадрата (на выбор — по центру/справа/слева) внутри картинки с его уменьшением..
Ну это уже подробности, разумеется с картинками 3000 на 3000 этот прием напрямую не катит =) А с примерно одного размера, из этого я исходил — вполне себе.
Казалось бы, довольно несложный прием, а так эффектно выглядит
Да…конечно выглядит прикольно и эффектно)) но и в самом деле лучше чтобы размер исходной картинки был всё-таки не очень большим иначе она закроет весь экран…и попмойму в таких случаях об экономии трафика можно не говорить))))))
Полностью согласен с Юрием Дроздовым.. и так причем не редко .. легкие приемы оказываются наиболее ефективными
Спасибо огромное реализовала на своём сайте такое
Sonya, рад что это оказалось полезным.
Смотрится довольно не плохо, спасибо за код.
красиво .,спасибо
Класс. Чувствую себя чайником. Я даже не знал, что так можно делать на css.
А есть подобная штукенцыя, только для текста!?
типа предложение…
Наводишь на него… и весь текст!?
Если вы имеете ввиду размер текста, то вполне можно. Только нужно ли и удобно ли это?
Прикольный эффект, применений массу можно найти. Еще несколько фишек по модификации вот тут есть http://cssor.ru/css/polezno-interesnoe/overflow-gallery
супер!!!!!!!!!1
Спасибо автору! Применил на одном своем сайте, несколько модифицировав идею — мне понравилось..
Ничего не работает ..
Поправил.
Спасибо большое!!! Хочу попробовать реализовать у себя на сайте