CSS: увеличение изображения при наведении курсора

CSS: увеличение изображений при наведении курсора мыши на миниатюру

Данная методика позволяет организовать вывод миниатюр на странице, которые при наведении курсора мыши будет увеличиваться до оригинального размера. Только одно изображение нужно для работы метода. Код CSS избавляет вас от рутинной работы по подготовке миниатюр. Также возможно сделать текстовую подпись под большим изображением.

Вид увеличителя

Реальная демонстрация

 

 

 

CSS: Ниже приведенный код нужно добавить в раздел HEAD вашей страницы:

<style
 type="text/css">

/* Код увеличителя начинается здесь */
/* Если ваше изображение не связано ссылкой с другой страницей, оставьте ссылку в виде <a href="#nogo"> 
Иначе увеличительне будет работать в IE6 */

.ienlarger {
	float: left;
	clear: none; /* Можно установить left или right по необходимости */
	padding-bottom: 5px; /* Расстояние между миниатюрами. Лучше не трогать данное поле */
	padding-right: 5px; /* Расстояние между миниатюрами и окружающим текстом */
}

.ienlarger a { 
	display:block;
	text-decoration: none;
/* Если добавить правило cursor:default;, то отключится курсор в виде руки */
}

.ienlarger a:hover{ /* Не надо изменять тип позиционирования */
 	position:relative;
}

.ienlarger span img {
	border: 1px solid #FFFFFF; /* Добавляем рамку вокруг изображения */
	margin-bottom: 8px; /* /Сдвигаем текст вниз от изображения */
}

.ienlarger a span {  /* Для большого изображения и названия */
	position: absolute;
	display:none;
	color: #FFCC00; /* Текст названия */
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; /* Размер шрифта названия */
	background-color: #000000;
	font-weight: bold;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 13px;
	padding-left: 10px;
}

.ienlarger img { /* Для IE, чтобы не было рамки вокруг ссылки */
border-width: 0;
}

.ienlarger a:hover span { 
	display:block;
	top: 50px; /* Большое изображение выскакивает вверх на 50px от миниатюры */
	left: 90px; /* Большое изображение выскакивает влево на 90px от миниатюры */
	z-index: 100;
	
/* Если добавить правило cursor:default;, то отключится курсор в виде руки на большом изображении */
}

.resize_thumb {
	width: 150px; /* Вводим нужный размер миниатюры здесь */
	height : auto;
}

/* Код увеличителя закончен */

</style>

HTML:

  <div class="ienlarger"><a 
href="http://ruseller.com"><img 
src="http://img406.imageshack.us/img406/4920/63734582.jpg" alt="thumb" 
class="resize_thumb" /><span>
    <img src="http://img406.imageshack.us/img406/4920/63734582.jpg" 
alt="large" /><br />
    Текст можно написать здесь.</span></a></div>

  <div class="ienlarger"><a 
href="http://www.google.co.uk/"><img 
src="http://img257.imageshack.us/img257/1926/92628379.jpg" alt="thumb" 
class="resize_thumb" /><span>
    <img src="http://img257.imageshack.us/img257/1926/92628379.jpg" 
alt="large" /><br />
    Текст можно написать здесь.</span></a></div>

  <div class="ienlarger"><a 
href="http://www.facebook.com/"><img 
src="http://img442.imageshack.us/img442/6325/87011940.jpg" alt="thumb" 
class="resize_thumb" /><span>
    <img src="http://img442.imageshack.us/img442/6325/87011940.jpg" 
alt="large" /><br />
    Текст можно написать здесь.</span></a></div>

  <div class="ienlarger"><a href="#nogo"><img 
src="http://img691.imageshack.us/img691/7360/89815502.jpg" alt="thumb" 
class="resize_thumb" /><span>
    <img src="http://img691.imageshack.us/img691/7360/89815502.jpg" 
alt="large" /><br />
    Текст можно написать здесь.</span></a></div>

	<br style="clear:left" />
Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Полезное"

^ Наверх ^