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

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

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

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

Процесс: Имеется картинка, в уменьшенном варианте, которую при наведении на нее курсора, можно увеличить. Причем все делается при помощи 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></div>
Да, все настолько просто. Есть минусы такого решения.. Например то, что сделанно в теге <strong><a></strong>. Можно этот тег опустить, тогда html будет выглядеть так:
<div class="code"><img class="st" src="" />

А в css нужно лишь убрать перед классом «a». Насчет кроссбраузерности не уверен...

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

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

  1. #160 Kitich в 11:18, 11 декабря 2008:

    Ответить | Цитировать

    Оно-то просто, но я лично против такого метода. Картинка остается «в потоке текста» и при изменении размеров весь контент начинает ездить туда-сюда. Меня лично, как пользователя, раздражает.

    Т.е. картинка должна увеличиваться, налезая на элементы вокруг. Конечно, это сложнее, тем более без скриптов, но стоит подумать.

    ЗЫ а зачем два чекбокса «оповещать о комментариях»??? :)

  2. #161 WebMast в 12:19, 11 декабря 2008:

    Ответить | Цитировать

    kitich, Пример может подойти для некоторых значков, иконок... Вот:

    <html>

    <head>

    <title>Оформление блока в три колонки</title>

    </head>

    <style type="text/css">

    /* <![CDATA[ */

    .st {

    width:100px;

    border:3px solid #c8c8c8;

    }

    .st:hover {

    width:120px;

    margin-bottom:-26px;

    }

    /* ]]> */

    </style>

    <body>

    <div class="bl" style="padding:25px;border:1px solid #333;">

    <img class="st" src="http://bitby.net/wp-content/uploads/2008/10/77110.jpg" />

    </div>

    </body>

    <html>

    Посмотри как это выглядит, а потом убери border:1 на 0

    Хотя этот метод не всегда подойдет. Увеличение картинки не должно быть большим!

    ЗЫ: Убрал один! ;)

  3. #162 Kitich в 13:54, 11 декабря 2008:

    Ответить | Цитировать

    У меня, к сожалению, ваш пример не работает... сейчас тороплюсь, нет времени ковырять, из-за чего. Но чисто по коду кажется, что этого мало будет.

    К тому же, насколько помню, в ИЕ6 отрицательные отступы не работают (

  4. #163 WebMast в 14:24, 11 декабря 2008:

    Ответить | Цитировать

    Вообще, это лучше сделать скриптом! Хотя не знаю...

    Kitich, может, если освободишься, подскажешь как сделать нормально? Только на одном css. Если конечно так возможно...

    Но чисто по коду кажется, что этого мало будет.

    К тому же, насколько помню, в ИЕ6 отрицательные отступы не работают (

    Тестилось в: Opera 9.xx, FF 3.04, Konqueror 3.5.10.

    В остальных нету возможности проверить!

  5. #164 Kitich в 17:49, 11 декабря 2008:

    Ответить | Цитировать

    Допишу курсач и сяду поиграюсь :)

    В ИЕ6 конкретно пример не проверял, но точно много раз сталкивался с проблемой — он отрицательные значения не везде понимает. Межбуквенное расстояние, например, уменьшить можно, а отступы нет, насколько помню.

  6. #534 Balamut в 23:35, 5 марта 2009: (подписался)

    Ответить | Цитировать

    Ну робзя, есть кто умный, как ету шляпу сделать, чтоб во всех браузерах пахало?

  7. #5281 сергей в 10:34, 9 сентября 2009:

    Ответить | Цитировать

    да уж

  8. #5638 WebMast в 8:48, 16 сентября 2009:

    Ответить | Цитировать

    Новый вариант здесь: plavnoe-uvelichenie-kartinki-pri-navedenii-kursora.

  9. #7430 s@nь)ч в 21:50, 22 октября 2009:

    Ответить | Цитировать

    Всем привет

    Вот что у меня получилось

    В CSS:

    /*Zoom Images*/

    .hoverbox a

    {

    cursor: hand;

    }

    .hoverbox a .preview

    {

    display: none;

    }

    .hoverbox a:hover .preview

    {

    display: block;

    position: absolute;

    top: -33px;

    left: -55px;

    z-index: 1;

    }

    .hoverbox img

    {

    /*background: #fff;*/ — убрал, стоить прозрачный gif

    border-color: #fff;

    border-style: solid;

    border-width: 0px;

    color: inherit;

    padding: 2px;

    vertical-align: top;

    }

    .hoverbox

    {

    /*background: #fff;*/

    color: inherit;

    display: inline;

    float: left;

    margin: 3px;

    padding: 5px;

    position: relative;

    }

    .hoverbox .preview

    {

    border-color: #a6dcf5;

    }

    В страничку:

    <a href="#" rel="nofollow"> </a>

    Одна проблема в IE6 не работает поддерживать минуса наотрез оказывается блин)

  10. #7431 s@nь)ч в 21:53, 22 октября 2009:

    Ответить | Цитировать

    Извиняюсь за накладку — код странички не высветился, кто заинтересуется, пишите на e-mail: igo266@yandex.ru

  11. #7476 WebMast в 18:57, 24 октября 2009:

    Ответить | Цитировать

    s@nь)ч, есть еще варианты, посмотри тут: bitby.net/verstka/plavnoe...vedenii-kursora/

  12. #7968 Goodwen в 16:33, 6 ноября 2009:

    Ответить | Цитировать

    Благодарю, за полезную инфу. Более подробно здесь: www.mydisser.com

  13. #9440 BoneS в 8:52, 12 марта 2010:

    Ответить | Цитировать

    Спасибо за код. очень помогло)

  14. #9599 Александр в 12:08, 11 апреля 2010: (подписался)

    Ответить | Цитировать

    спасибо за пример!

    пригодится в копилки

  15. #9885 Los-Angelsk в 21:58, 19 июля 2010:

    Ответить | Цитировать

    Спасибо, реализовал в ЖЖ.

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

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

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

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя