Эту работу проделал Alen Grakalic. В статье CSS: создание диаграмм я уже знакомил читателей блога с его оригинальными идеями и вот теперь нашел еще одно интересное, изящное решение, с которым и предлагаю подробно познакомиться…

Итак, для чего это? Иногда на странице не имеется достаточно пространства, чтобы показать большие изображения, но все же очень хочется избежать маленьких и едва распознаваемых картинок. Используя предложенную уловку, мы ограничиваем видимые размеры изображения, и показываем полноразмерное изображение, только когда пользователь наводит указатель мыши на миниатюрное изображение. Впрочем, посмотрите все на примере:

Вы можете скачать исходный код примера, и воспроизвести этот пример на своем сайте.

То, что мы видим, это не фактическое изменение размеров изображения. Это – изменение размеров видимой области при наведении указателя мыши. Здесь используется CSS-свойство overflow.

Свойство overflow определяет отображение контента, когда он переполняет область контейнера. Если размеры контейнера ограничены по какой-либо причине, свойство overflow используют, чтобы определить поведение при переполнении контейнера. Возможные значения свойства overflow: visible, hidden, scroll и auto. На использовании свойства overflow и построен этот трюк. По умолчанию часть картиники скрывается, и появляется только при наведении указателя мыши.

Идея состоит в том, чтобы поместить изображение в какой-либо контейнер. Договоримся о том, что таким контейнером для изображения будет являться тэг a. Мы устанавливаем размеры (ширину и высоту) контейнера в требуемые значения, и устанавливаем свойство position контейнера relative. Изображение же внутри имеет position:absolute. Используем отрицательные значения свойств top и left, чтобы сместить изображение. Таким образом мы теперь видим только часть картинки в нашем контейнере. Оставшаяся часть картинки скрыта. И показана целиком она будет только лишь при наведении указателя мыши, т.е. при a:hover мы установим свойству overflow значение visible и покажем картинку целиком.

HTML-код – проще не бывает:

<ul id="thumbs">
  <li>
  <a href="http://example.com/"><img src="1.jpg" /></a>
  </li>
  <li>
    <a href="http://example.com/"><img src="2.jpg" /></a>
  </li>
  <li>
    <a href="http://example.com/"><img src="3.jpg" /></a>
  </li>
  <li>
    <a href="http://example.com/"><img src="4.jpg" /></a>
  </li>
</ul>

Вот фрагмент CSS-кода с комментариями:

/* убираем поля и отступы, */
/* скрываем маркеры списка */
ul#thumbs, ul#thumbs li{
  margin:0;
  padding:0;
  list-style:none;
}

/* включаем элементы списка в плавающую модель, */
/* смещая их влево и таким образом вытягивая по */
/* горизонтали, заодно ставим легкую рамочку и */
/* задаем небольшое поле справа */
ul#thumbs li{
  float:left;
  margin-right:2px;
  border:1px solid #999;
  padding:1px;
}

/* вот он, контейнер для картинки, "глазок", в */
/* котором отображается ее часть */
ul#thumbs a{
  display:block;
  float:left;
  width:70px; /* ширина видимой части */
  height:70px; /* высота видимой части */
  line-height:70px;
  overflow:hidden; /* скрываем "лишнее" */
  position:relative; /* это важно! */
  z-index:1;
}

/* ну и сама картинка позиционируется абсолютно, */
/* ее верхний левый край смещается в невидимую */
/* область */
ul#thumbs a img{
  float:left;
  position:absolute;
  top:-10px;
  left:-35px;
}

Теперь CSS-код, который определит поведение при наведении указателя мыши на картинку.

/* показываем картинку полностью, "поднимаем" */
/* ее над соседними картинками и убираем рамку с */
/* элемента  - она теперь не нужна. */
ul#thumbs a:hover{
  overflow:visible;
  z-index:1000;
  border:none;
}
/* а вот полной картинке рамочку добавим */
ul#thumbs a:hover img{
  border:1px solid #999;
  background:#fff;
  padding:2px;
}

Эту идею можно использовать и для единичной картинки. Исходный код разбирать подробно наверное уже не стоит, потому как в интересующей нас части он ничем не отличается от уже разобранного нами. А пример – пожалуйста:

Вы можете скачать исходный код примера, и воспроизвести этот пример на своем сайте.

Вот и все. Надеюсь, кому-нибудь пригодится.

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal