Всплывающие при наведении изображения с помощью CSS

Очень часто на многих сайтах требуется выводить фотографии, слайды и так далее. Изображения выводятся сначала списком миниатюр, при клике на которые, пользователь может посмотреть увеличенную копию. Но было бы интересно сделать так, чтобы увеличенная копия изображения показывалась пользователю при наведении мышки на миниатюру. Существует достаточно большое количество решений с использованием JavaScript, которые реализуют этот функционал. Попробуем сделать то же самое, но только с использованием CSS.

Для создания такого эффекта создадим слой-контейнер pic в который поместим ссылку, а в нее
два изображения — маленькое и большое.

HTML код:

<div id="pic">

	<a class="p1" href="#" title="Маленькая картинка">

		<img src="smallimage.jpg" alt="Маленькая картинка" width="120" height="90" />

		<img src="bigimage.jpg" alt="Большая картинка" width="400" height="300" class="large" />

	</a>

</div>

Смотрите комментарии напртив каждой строки

 /* Описание котейнера для изображений */

#pic{
	background-color: #FFFFFF;
	position: relative; /* Положение выставлено как relative.
  Это необходимо для того, чтобы потом
  абсолютно (absolute)спозиционировать
  большу картинку относительно левого
  верхнего угла слоя */
	left: 10px;
	top: 10px;
	width: 120px; /* Ширина слоя = ширине миниатюры */
  }

  /* Описание стиля большой картинки */

  /* Идея в том, что изображение сначала имеет размеры 1х1 и
  смещено за пределы видимости слоя. */

#pic a .large {
	border: 0px;
	display: block;
	height: 1px;
	left: -1px;
	position: absolute;
	top: -1px;
	width: 1px;
}

#pic a img {
	border: 0;
}
/* Выставляем стиль для ссылки, которая обрамляет изображения */

#pic a.p1, #pic a.p1:visited {
	background: #FFFFFF;
	border: 1px solid #000000;
	display: block;
	height: 90px;
	left: 0;
	text-decoration: none;
	top: 0;
	width: auto;
}
/* Стиль для ссылки при наведении на нее мышкой */

#pic a.p1:hover {
	background-color: #FFF;
	color: #000000;
	text-decoration: none;
}
/* Стиль для большого изображения при наведении мышки на миниатюру */

#pic a.p1:hover .large {
	border: 1px solid #000000;
	display: block;
	position: absolute; /* Абослютное позиционирование относительно слоя-контейнера */
	top: -105px;        /* Покажем большю картинку справа */
	left: 130px;        /* по центру от миниатюры */
	width: 400px;       /* Выставим нужные размеры большой */
	height: auto;      /* картинки, потому что она была 1х1 */
  }

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

Почему Вы еще не прокомментировали?
Оставьте свой комментарий! Весь Интернет уже заждался!