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


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

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

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


Лучшие новости сайта

Исходник

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

При я не раз сталкивался с подобной необходимостью и что самое приятное данная функция легко реализуется на практике при помощи элементарных основ 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


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


Источник: http://for-net.ru/view_post.php?id=100


Как сделать при наведении на ссылку фото


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

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

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

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

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

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

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

Читать топ новости: