Плиз!.ru/wp-content/themes/bloggood/images/RSS-email.png">
Вы нашли то, что искали?! Если да, тогда в знак благодарности жмите на кнопку социальных сетей, которая размещена снизу.
Да, и подписывайтесь на обновления моего блога, здесь много вкусных тем.
В сегодняшнем уроке мы будем реализовывать эффект, который в основном подойдет для изображений. Результатом урока будет появляющееся описание при наведение на изображение.
Данный эффект немного напоминает эффект, который реализован в Яндкес.Картинки . Может и большого сходства нет, но что-то похожее наблюдается.
Шаг 1. HTML-разметка
HTML-разметка очень простая. Состоит из основного блока, картинки и блока с описанием:
Wattie Buchan
The Exploited
Шаг 2. Стили основного блока
В данном шаге мы напишем стили для основного блока. Для этого создадим класс и назовем его columns
:
Columns {
position: relative;
width: 200px;
display: inline;
float: left;
margin: 10px;
padding: 0;
}
Здесь мы указали ширину блока, установили способ позиционирования элемента, внешние отступы также установили выравнивание.
Шаг 3. Стили для изображения
В данном шаге мы напишем стили для изображения, которое находится внутри блока item
:
Item img {
position: relative;
}
Шаг 4. Стили для блока с описанием
В этом шаге мы напишем стили для блока с описанием, который имеет класс info
:
Info {
position: absolute;
left: -10px;
top: -10px;
padding: 210px 12px 5px 8px;
width: 200px;
background: #fff;
display: none;
box-shadow: 0px 0px 6px #7d7d7d;
}
.info p {font-family: Tahoma; font-size: 13px;}
Здесь мы указали ширину блока, фоновый цвет, тени, внешние и внутренние отступы, а также скрыли блок с описанием. Т. е. он будет появляться только при наведение на него мышью.
Шаг 4. Псевдоэлемент:hover
На данном шаге мы пропишем стили для псевдоэлемента:hover. Т.е. действие, которое будет совершаться при наведении курсора на блок с картинкой:
Item:hover .info {
display: block;
z-index: 99;
}
.item:hover {
z-index: 99;
}
Здесь мы указали свойство display: block;
. Это нужно для того, чтобы элемент появлялся при наведении на него мышью. Также мы указали значение z-index: 99.
Если на данном шаге посмотреть результат, то мы увидим, что при наведении появляется блок с описанием. Но, при этом картинка уходит на задний план. Чтобы решить данную проблему нам нужно прописать следующие стили:
Item:hover img {
z-index: 999;
}
Мы придали свойству z-index
значение 999
. Это говорит о том, что теперь картинка находится выше всех остальных элементов. Поэтому, ее теперь будет видно при наведении мышью.
Полный код стилей
Columns {
position: relative;
width: 200px;
display: inline;
float: left;
margin: 10px;
padding: 0;
}
.item img {
position: relative;
}
.info {
position: absolute;
left: -10px;
top: -10px;
padding: 210px 12px 5px 8px;
width: 200px;
background: #fff;
display: none;
box-shadow: 0px 0px 6px #7d7d7d;
}
.info p {font-family: Tahoma; font-size: 13px;}
.item:hover .info {
display: block;
z-index: 99;
}
.item:hover {
z-index: 99;
}
.item:hover img {
z-index: 999;
}
На этом данный урок закончен. Спасибо за внимание.
Влад Мержевич
В HTML уже есть глобальный атрибут title
, который можно добавить к любому элементу веб-страницы. Наличие этого атрибута добавляет всплывающую подсказку, которая появляется при наведении курсора мыши на элемент. Шрифт текста, размер подсказки и её вид в целом зависит от операционной системы и не может быть изменён с помощью стилей. К тому же многих разработчиков не устраивает, что такая подсказка довольно быстро исчезает. Это заставляет искать способы сделать свою всплывающую подсказку, которая была бы оформлена желаемым образом. Конечно, самый универсальный способ заключается , но в некоторых случаях вполне достаточно обойтись и одним CSS.
В качестве примера я выбрал фотографии, при наведении на них курсора мыши показывается название фотографии. Сам вывод текста будем делать при помощи свойства content
и брать значение текста из какого-либо атрибута через attr()
. К сожалению, content
не будет работать желаемым образом в сочетании с img
, поэтому фотографии вставляются в элемент
, к которому добавляем атрибут data-title
с текстом всплывающей подсказки. Есть соблазн вставить атрибут title
и задействовать его, но в таком случае будет выводиться одновременно две подсказки: одна «родная», а вторая наша. Так что мы используем свой собственный атрибут data-title
, благо HTML5 позволяет это делать. Таким образом получим следующий код (пример 1).
Пример 1. Код HTML
HTML5
IE
Cr
Op
Sa
Fx
Всплывающая подсказка на CSS
Переходим к стилю нашей подсказки. Вначале надо сделать, чтобы она вообще появлялась. Для этого воспользуемся псевдоэлементом ::after
, к которому добавляем content: attr(data-title)
.
Photo::after {
content: attr(data-title);
}
Получится, что после содержимого элемента с классом photo
будет выводиться текст из атрибута data-title
, что нам и требовалось. Но поскольку всплывающая подсказка должна появляться только при наведении на фотографию курсора мыши, добавим ещё псевдокласс :hover
.
Photo:hover::after {
content: attr(data-title);
}
Остаётся только задать желаемый стиль нашей подсказки, в частности, положение, цвет фона, текста, рамку и др. (пример 2).
Пример 2. Стиль подсказки
HTML5
CSS3
IE
Cr
Op
Sa
Fx
Всплывающая подсказка на CSS
Результат данного примера показан на рис. 1.
Рис. 1. Вид всплывающей подсказки
Положение подсказки не зависит от позиции курсора, она появляется в одном и том же месте при наведении курсора на изображение. Можно сделать, чтобы подсказка выводилась в нижней части фотографии, так она не будет закрывать большую часть картинки. Стиль при этом поменяется незначительно (пример 3).
Пример 3. Вывод подсказки внизу фотографии
HTML5
CSS3
IE
Cr
Op
Sa
Fx
Всплывающая подсказка на CSS
Результат данного примера показан на рис. 2.
Рис. 2. Вид всплывающей подсказки
К сожалению, свойство transition
, с помощью которого можно сделать анимацию подсказки, не работает с псевдоэлементами. Поэтому придётся довольствоваться резким появлением нашей всплывающей подсказки. Также не будет никакого эффекта в браузере IE8 и младше, эта версия не поддерживает ::after
. Впрочем, если заменить этот псевдоэлемент на :after
, то можно получить более-менее работающий вариант.
