Визуальный слайд-эффект для подписей изображений на HTML5 и CSS3

Раньше для создания различных эффектов обязательно требовалось подключение javascript и дополнительных файлов изображений, с выходом на арену веб-разработки мощнейших инструментов CSS3 и HTML5 всё реализуется гораздо проще.
В сегодняшнем примере продемонстрирую html-разметку и готовый набор правил css, для создания одного из множества визуальных эффектов вывода подписей к изображениям, эффекта в виде выскальзывающего блока с определенным содержанием. В заголовке назвал его условно «слайд-эффектом», потому-как «выскальзывающие», или ещё хлеще «выдвигающиеся», «выезжающие» подписи, подходят больше для логопедических тренировок. Неважно, назовите «шторками», кстати очень распространенное название эффектов при наведении на картинки.

И так, смотрим пример, а потом немного пояснений и разбор что к чему и куда…

Поддержка браузерами

Эффект основан на трансформациях и переходах CSS3 применённых относительно к тегу HTM5 <figure>. Стопроцентное функционирование в следующих браузерах: Internet Explorer 10+, Firefox 6+, Chrome 13+, Opera 11+ и Safari 3.2+.
Исходя из этого, следует простой вывод: широко и повсеместно использовать эффекты основанные только на CSS3, пока преждевременно, конечно если вам не всё равно на армию пользователей упорно засевших на XP с её IE8. Хотя…

HTML Разметка

Как я писал выше, для группирования изображения и подписи к нему используем теги <figure> и <figcaption> из арсенала платформы HTML5

<figure>
 <img src="http://dbmast.ru/wp-content/uploads/2014/01/dbmast2.jpg">
 <figcaption>
  <h2>Заголовок</h2>
     <p>
      Пример создания визуального эффкта выскальзывающей подписи к изображениям с применением только CSS3.
     </p>   
     <p>
      Здесь можете разместить например, краткое описание товара, анонс статьи или представление работ портфолио.
     </p>
     <p>
      Всё что угодно, в зависимости от размера миниатюры и вашей неуёмной фантазии.
     </p>
  <a href="#">Ссылка »</a>
 </figcaption>
</figure>

Изображение помещаем в раздел тега <figure>, сразу после картинки открываем тег <figcaption>, размещаем нужное вам содержание(заголовок, описание, ссылку) и закрываем теги </figcaption> и </figure>
Всё! Остаётся самое интересное, это сформировать внешний вид и поведение всех элементов используя магию свойств CSS3.

Стили CSS

Начнем с определения стилей для тега <figure>, укажем всё необходимое, ширину width:, высоту height:, отступы margin:, стиль курсора, размер и начертание шрифта, позиционирование position:, a так же укажем свойство overflow: hidden, для того чтобы скрыть все элементы, вложенные в блок и выступающие за его границы.

figure {
width: 350px;
height: 240px;
margin: 10px;
overflow: hidden;
position: relative;
text-align: left;
box-shadow: 1px 1px 3px #ccc;
border: 4px solid #fff;
cursor: default;
font:normal 11px/15px Helvetica, Arial, sans-serif;
}

В примере добавил рамку и немного тени box-shadow:, придав тем самым чуточку выразительности основному элементу с картинкой.
Долее сформируем блок подписи к изображению в теге <figcaption> и определим ему свойства transition: и transform:, а так же спрячем его до поры до времени с помощью свойства visibility:hidden;.

figure figcaption {
width: 350px;
height: 240px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background: #eee;

-moz-transform:    translateX(-350px);
-o-transform:      translateX(-350px);
-webkit-transform: translateX(-350px);
transform:         translateX(-350px);
 
visibility:hidden;  
 
-webkit-transition: all 0.4s ease-out; 
   -moz-transition: all 0.4s ease-out; 
    -ms-transition: all 0.4s ease-out; 
     -o-transition: all 0.4s ease-out; 
        transition: all 0.4s ease-out;
}

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

figure img {
display: block;
position: relative;
 
-webkit-transition: all 0.4s ease-out; 
   -moz-transition: all 0.4s ease-out; 
    -ms-transition: all 0.4s ease-out; 
     -o-transition: all 0.4s ease-out; 
        transition: all 0.4s ease-out;
}
 
figure h2 {
text-transform: uppercase;
color: #333;
position: relative;
font-size: 17px;
letter-spacing: 1px;
margin: 20px 0 0 20px;
}
 
figure p {
font-size: 12px;
line-height: 17px;
position: relative;
color: #333;
margin: 10px 0 10px 20px;
width:310px;
 
-webkit-transition: all 0.4 ease-out; 
   -moz-transition: all 0.4 ease-out; 
    -ms-transition: all 0.4 ease-out; 
     -o-transition: all 0.4 ease-out; 
        transition: all 0.4 ease-out;
}
 
figure a {
text-decoration: none;
color: #359CC6;
margin: 10px 0 10px 20px;
}
 
figure a:hover {
color: #E88F00;    
border-bottom: 1px dotted #9F1D35;
}

Теперь осталось только завести наш эффект с помощью псевдокласса :hover для элементов расположенных в теге figure:

figure:hover figcaption {
-moz-transform:    translateX(0);
-o-transform:      translateX(0);
-webkit-transform: translateX(0);
transform:         translateX(0);
visibility:visible;
}
 
figure:hover img {
-moz-transform:    translateX(350px);
-o-transform:      translateX(350px);
-webkit-transform: translateX(350px);
transform:         translateX(350px);
}
 
figure:hover p{
opacity: 1;
}

Дополнение

В одном из комментариев к уже опубликованной статье меня спросили: «как сделать чтобы figcaption был не текстовым… а картинкой?» То есть, сделать так чтобы одна картинка сменялась другой при наведении.

Всё очень просто, необходимо в CSS добавить селектор с именем img к разделам figure figcaption и figure:hover figcaption, так чтобы получилось
figure figcaption img и figure:hover figcaption img соответственно. Чтобы не дублировать одинаковые свойства, следует объединить их в одну группу, прописав названия селекторов через запятую:

figure figcaption,
figure figcaption img{
....здесь все необходимые свойства
}
 
figure:hover figcaption,
figure:hover figcaption img{
...здесь все необходимые свойства
}

В общем, чтобы вам особо не заморачиваться, дополнил код CSS, добавив возможность смены картинки на другую при наведении по умолчанию. Если вам понадобится использовать такую возможность достаточно в figcaption вместо текстового содержания поместить нужную вам картинку:

<figure>
 <img src="адрес-вашей-картинки-1.jpg">
 <figcaption>
  <img src="адрес-вашей-картинки-2.jpg">
 </figcaption>
</figure>

Оригинал