Урок CSS: Появляющееся описание при наведение на изображение

desc-imgВ сегодняшнем уроке мы будем реализовывать эффект, который в основном подойдет для изображений. Результатом урока будет появляющееся описание при наведение на изображение.

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

Шаг 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;
}

На этом данный урок закончен. Спасибо за внимание.

Автор урока: Артур Хабиров
Урок для Вас подготовлен командой сайта www.red-star.pro.