Главная » Создание сайтов » Верстка » Увеличение картинки при наведении

Увеличение картинки при наведении

Увеличение картинки при наведении

В сегодняшнем уроке, я бы хотел представить вам хороший вариант для галлерей.

Процесс: Имеется картинка, в уменьшенном варианте, которую при наведении на нее курсора, можно увеличить. Причем все делается при помощи css. Вот сразу пример: zoom_image.html

В послденее время, я перестал вам лить воду на уши, поэтому старался закомментировать вам каждую строку..

CSS:
/* Задание стилей для уменьшенного варианта*/
a.st img {
width:100px; /* Задание ширины миниатюры */
border:3px solid #c8c8c8; /* Задание границы */
}

/* Задание стилей для целого изображения */
a.st:hover img {
position:relative; /* Задание позиции увеличенного изображения */
top:-30px; /* Задание отклонения увеличенного изображения вверх(НЕ ОБЯЗАТЕЛЬНО) */
width:200px; /* Задание ширины увеличенного изображения */
}

HTML:
<a class="st" href="#"><img src="1.png" alt="" title="" /></a>

Да, все настолько просто. Есть минусы такого решения.. Например то, что сделанно в теге <a>. Можно этот тег опустить, тогда html будет выглядеть так:

<img class="st" src="" />
А в css нужно лишь убрать перед классом «a». Насчет кроссбраузерности не уверен..

Второй минус этого, это то, что есть некорректное отображение в IE6. Это очень существенный минус.. Может кто-нибудь знает, как сделать корректное отображение в IE? Если да, то выложите, пожалуйста.

С уважением, Vasilenko Ivan!

Комментарии — 17 комментариев

  1. […] я писал об увеличение картинки при наведении при помощи css. Но она была не […]

  2. Спасибо за идею! Если добавить несколько картинок подряд, можно сделать галерею изображений.

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting