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 последних добавленных файлов в рубрике"Полезное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 1 Сентября 2011 17:53
    prologos
    мне нравится :)
  • 1 Сентября 2011 21:21
    justik
    спасибо :) действительно нужная вещь
  • 2 Сентября 2011 01:32
    San4o
    прикольно, пригодится, спасибо :)
  • 2 Сентября 2011 02:23
    alexxhub
    Жуткая вещь, хочется уйти с ресурсов, где подобное сделано. Раздражает и напрягает. Лучше сделать по клику мыши открытие изображений например в том же лайтбоксе.
  • 2 Сентября 2011 11:20
    Ygreec
    Я когда-то давно нашел подобное, но так и не нашел где применить... правда там не было возможности для подписи под изображением... Пусть даже это можно применить один раз на тысячу сайтов - все равно спасибо, что есть. Там, где это будет уместно - будет то, что надо.
  • 2 Сентября 2011 15:53
    Pascalius
    3
  • 3 Сентября 2011 16:42
    errante
    Исходники по ссылке скачать не доступны
  • 3 Сентября 2011 23:54
    sloffa
    1. Не работает ссылка на скачивание. 2. Возможно ли это увеличение фоток вкрутить в WP шаблон на уже работающем сайте?
  • 12 Февраля 2012 21:52
    gameme
    спасибо!!! давно искал такой скрипт))
  • 16 Февраля 2012 15:52
    akcuoma
    Ссылка скачать не работает...
    • 7 Марта 2012 02:13
      boris021
      Зарегаться надо
  • 12 Мая 2012 14:28
    pushkov
    прошу подсказать как сделать вывод большого размера не вправо, а влево от миниатюры? Спасибо
  • 3 Августа 2012 06:52
    imengine
    Спасибо, полезная фишка. Было бы еще лучше, если бы увеличенные изображения двигались за курсором, пока курсор над миниатюрой. Не подскажете, как это реализовать?
  • 9 Ноября 2012 14:06
    mak1918
    Эта галерея прилипаят к левой части сайти. Подскажите пожалуйста, как выровнять ее выровнять?
    • 18 Ноября 2012 10:59
      pushkov
      Я этот вопрос задавал еще в мае. Картинка просто скрывается за горизонтом экрана. Попытка вставить в код вместо left right в коде .ienlarger a:hover span { не приводит к желаемому результату - картинка также влево выводится.
  • 25 Ноября 2012 11:32
    guyasyou
    Я думал придется тут с JS мучатся, чтобы показывать так. А оказалось просто))
  • 23 Января 2013 20:16
    ogrmak
    Спасибо, помогло!!!!
  • 13 Февраля 2013 13:01
    kolhoznik
    Автор молодец! давно искал!
  • 17 Февраля 2013 01:00
    Banifaciy
    не работает в эксплоуэре, как сделать, что бы работал?
  • 16 Апреля 2013 20:08
    Maskit
    Спасиб большое!!! =)
  • 28 Мая 2013 13:23
    putus
    Спасибо, давно искал, все получилось. Но на некоторых картинках нужно большое изображение вывести не вправо, а влево от миниатюры. Т.е как сделать, чтобы часть изображений увеличивалась влево, а часть право.Подскажите пожалуйста как сделать, сам не очень разбираюсь.
  • 17 Декабря 2013 00:40
    semen74
    Да! это нужная штука. Кое-кто считает,что лучше нажать. Но перед этим надо еще навести. А вдруг лень жамкать!? Вот она сила этой фичи. Вообще, сайт Евгения Попова "от профи". У меня он в золотом избранном
  • 4 Марта 2014 11:53
    diviniti
    Урок полезный, и то что нужно для моего сайта, но единственная проблема - картинка улетает за границы основного дива и прячется под боковое меню - как настроить поворот картинки?
  • 17 Июня 2014 12:10
    komponent
    Демонстрация не работает
  • 25 Мая 2015 07:28
    annarolya
    доброе время суток. Скажите, пожалуйста, не является ли ссылка <a href="#nogo"> битой?
  • 10 Марта 2016 11:16
    mstepovikov
    огромное спасибо за код, но может вы могли бы подсказать, как сделать что бы большое изображение открывалось в центре экрана, я что то не могу додуматься до этого
^ Наверх ^