Слайд-эффекты для подписей изображений на чистом CSS

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

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

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

HTML

В качестве базового контейнера для изображения и подписи, используем блочный элемент <div>, для тега добавим атрибут class с именем селектора, и уже в таблице стилей, сформируем внешний вид контейнера, изображения, а так же оформим подписи, и добавим им немного движухи.
Для подписей, так же используем div-контейнер, разместив его внутри родительского блока с картинкой. Так как эффектов для подписей у нас несколько, каждый выделим отдельным классом: caption-1, caption-2 и т.д. В последствии, для того чтобы применить тот или иной эффект, достаточно будет изменять именно эти классы. Для наглядности приведу парочку фрагментов кода, для двух миниатюр с подписями:
 

<div class="image-container">
    <img src="img/1.jpg"/>
    <div class="image-caption caption-1">
      <h2>заголовок</h2>
      <p>краткое описание картинки</p>
    </div>
</div>
 
<div class="image-container">
    <img src="img/2.jpg"/>
    <div class="image-caption caption-2">
      <h2>заголовок</h2>
      <p>краткое описание картинки</p>
    </div>
</div>

 
Как вы видите, структура и расстановка элементов довольно проста, внутри div-контейнера для подписи, размещаем заголовок второго уровня (тег <h2>) и краткое описание картинки внутри тегов <p></p>. Оформление заголовка и описания, так же вынесем в таблицу стилей, файл style.css, содержание которого, мы дальше и рассмотрим.
 

CSS

Стили относящиеся к оформлению демо-страницы опущу, приведу лишь весь фарш кода относящийся непосредственно к контейнеру с изображением, к формированию подписей и эффектов перехода для них.
Для понимания, что, куда и зачем, в код прописал небольшие комментарии, так что разобраться будет не сложно.

Базовому контейнеру class="image-container" выставил фиксированные размеры ширины width: 250px; и высоты height: 200px;, определил относительное позиционирование position: relative; и с помощью свойства box-shadow добавил лёгкую внешнюю тень.
Изображениям и подписям установил абсолютное позиционирование position: absolute;, а для ширины и высоты использовал процентную запись в 100%, это означает, что размеры изображения и блока с подписью, будут вычисляться относительно родительского контейнера, в нашем случае, заполнять всю его область.

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

/* базовый контейнер */
.image-container {
    width: 250px;
    height: 200px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    margin: 10px;
    -webkit-box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
    -moz-box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
    box-shadow: 2px 2px 50px rgba(0,0,0,0.6);
}
 
/* изображение внутри контейнера */
.image-container img {
    width: 100%;
    height: 100%;
    position: absolute;
}
 
/* блок подписи к изображению */
.image-container .image-caption {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    font-family: 'Open Sans',sans-serif;
    text-align: center;
}
 
/* заголовок подписи */
.image-caption h2 {
    margin-top: 50px;
    color: #fffefe;
    font-weight: 300;
}
 
/* абзац описания картинки */
.image-caption p {
    color: #fff;
}
 
/* Варианты слайд-эффектов */
 
/* слайд слева */
 
.image-container .caption-1 {
    left: -260px;
    transition: all 0.5s;
}
.image-container:hover .caption-1 {
    left: 0;
    transition: all 0.5s;
}
 
/* слайд сверху */
.image-container .caption-2 {
    top: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-2 {
    top: 0;
    transition: all 0.5s;
}
 
/* слайд снизу */
.image-container .caption-3 {
    bottom: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-3 {
    bottom: 0;
    transition: all 0.5s;
}
 
/* слайд справа */
.image-container .caption-4 {
    right: -260px;
    transition: all 0.5s;
}
.image-container:hover .caption-4 {
    right: 0;
    transition: all 0.5s;
}
 
/* слайд с верхнего левого угла */
.image-container .caption-5 {
    left: -260px;
    top: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-5 {
    left: 0;
    top: 0;
    transition: all 0.5s;
}
 
/* слайд с верхнего правого угла */
.image-container .caption-6 {
    right: -260px;
    top: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-6 {
    right: 0;
    top: 0;
    transition: all 0.5s;
}
 
/* слайд с нижнего левого угла */
.image-container .caption-7 {
    left: -260px;
    bottom: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-7 {
    left: 0;
    bottom: 0;
    transition: all 0.5s;
}
 
/* слайд с нижнего првого угла */
.image-container .caption-8 {
    right: -260px;
    bottom: -210px;
    transition: all 0.5s;
}
.image-container:hover .caption-8 {
    right: 0;
    bottom: 0;
    transition: all 0.5s;
}

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

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях: