Самостоятельное создание сайта
ВСЕ О ТОМ, КАК
СДЕЛАТЬ САЙТ
САМОМУ


Оставить отзыв или предложение

Как сделать увеличение картинки

Исходник

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

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

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

В чем тут особенности у нас будет изображение ссылка, что соответственно нам добавит несколько записей в таблицу стилей, на большом изображении мы будем делать подпись снизу, и рамочку, вот собственно и все ТЗ. Код html нас предельно короткий:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="ienlarger"><a href="http://www.for-net.ru/"><img src="small.png" alt="Маленькое изображение" /><span>
    <img src="big.png" alt="Большое изображение" /><br />
    При наведении мыши картинка становится большой</span></a></div>
</body>
</html>

Тут все просто, мы сделали обычный контейнер в который мы положили два изображения и сделали их ссылкой, прописав естественно классы на все. А вот весь основной код увеличения картинки при наведении у нас как раз в таблице стилей CSS:

.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
}
.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 {
border-width: 0;
}
.ienlarger a:hover span {
display:block;
top: 50px;
left: 90px;
z-index: 100;
}

Теперь давайте по порядку разбираться что у нас где. Первый класс .ienlarger это контейнер, в котором собственно говоря, все хранится, мы его выровняли по левой стороне float: left;, затем сделали внутренние отступы снизу и справа на 5 пикселей padding-bottom: 5px; padding-right: 5px;. Так как у нас изображение это ссылка мы сделали класс .ienlarger a в котором мы отобразили его как блочный элемент display:block;, затем отменили обводку картинки text-decoration: none;.

Далее мы отобразили свойство при наведении курсором на блок .ienlarger a:hover и установили положение элемента относительно его исходного места position:relative; как видите, оно осталось без изменений.

Следующий класс .ienlarger span img у нас отвечает за большое изображение, вокруг которого делается рамка в 1 пиксель белого цвета border: 1px solid #FFFFFF; и делаем нижний отступ от фотографии на 8 пикселей, чтобы потом вписать туда текст margin-bottom: 8px;.

Теперь сама область вокруг большого изображения .ienlarger a span, здесь мы задаем абсолютную позицию без координат это нам необходимо для реализации эффекта увеличения картинки при наведении курсора position: absolute; задаем то что элемент не отображается display:none; так как нам необходимо его будет отобразить только при наведении мыши. Убираем подчеркивание с текста так как блок у нас является ссылкой text-decoration: none; затем параметры шрифта для надписи font-family: Arial, Helvetica, sans-serif; font-size: 13px;, цвет фона черный background-color: #000000; и внутренние отступы со всех сторон padding.

Еще делаем класс .ienlarger img специально для IE, так как в нем у нас всегда все криво отображается, обнуляем толщину обводки изображения border-width: 0;.

Наконец-то самый важный класс который нам собственно и дает возможность сделать увеличение картинки при наведении курсора .ienlarger a:hover span в нем и есть так сказать «вся магия», здесь мы уже отображаем блок display:block;, делаем отступ от верха в 50 пикселей так как у нас позиционирование абсолютное top: 50px; от левой стороны 90 пикселей left: 90px; и последнее имитируем эффект наложения друг на друга благодаря z-index: 100;и все готово.

Как я уже говорил это достаточно простое свойство реализовав которое вы получите очень качественный и интересный эффект для своего сайта так как по сути все строится на параметре :hover, а все остальное это уже ваша фантазия.

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

Посмотреть результат!


Дата публикации:2014-02-04


Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Нашли ошибку в тексте

Нашли ошибку в тексте!!!
Просто выделите её мышкой, нажмите Ctrl+Enter.
И мы все исправим.

Allsoft
Хостинг Beget