Примеры использования html-тегов figure и figcaption

HTML-теги figure и figcaption появились в стандарте HTML5 для формирования блока с картинкой и описания к ней. Кроме того, эти теги можно применять для оборачивания блоков кода, рекламы, видео или аудио.

Стандартный вид использования этих тегов таков:

На первый взгляд, ничего особенного, и можно было бы обойтись и без этих тегов, воспользовавшись для формирования блока div-ами. Давайте для начала заглянем в код и посмотрим, к каким тегам - блочным или строчным - они относятся. Инспектор свойств (F12, или CTRL + SHIFT + I) показывает нам, что и <figure>, <figcaption> - это блочные теги:

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

После этого получим уже другой вид той же картинки. Стало намного симпатичней, не так ли?

Эффект увеличения картинки при наведении на figure

Давайте усложним код, добавив эффект увеличения изображения при наведении на figure. Используем для этого свойство transform: scale(). Кроме того, спрячем изначально подпись под изображением в теге figcaption, добавив ему свойство opacity: 0, и увеличим это свойство до 1 при наведении на figure. Для плавности добавим анимацию типа transition. В результате получим такой код:

В коде для тега figure задан атрибут id="figure-hover". Это сделано для создания различия в примерах, хотя при наличии у вас единственного тега figure на странице или в случае форматирования всех таких тегов в соответствии с приведенным выше кодом необязательно.

Сам пример с увеличивающейся картинкой и появляющимся описанием выглядит так:

Как вы, должно быть, догадались, это далеко не все, что можно сделать с тегами <figure> и <figcaption>, используя различные правила css. Поэтому давайте рассмотрим ряд примеров с Codepen, которые раскрывают возможности этих тегов, используя намного больше свойств CSS.

Пример использования тегов figure и figcaption для форматирования элементов code и pre

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

Давайте посмотрим, как можно разместить стихотворение в теге figure:

Для данного примера были использованы такие стили:

Рассмотрим пример, который демонстрирует код на JavaScript (используются теги <pre> и <code> внутри<figure>) и описание-пояснение этого кода внутри тега <figcaption>:

     
      var btn = document.querySelector('button');

      function random(number) {
           return Math.floor(Math.random()*(number+1));
      }

     btn.onclick = function() {
         var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
         document.body.style.backgroundColor = rndCol;
       }  
   
    

Примеры форматирования изображений с помощью html-тегов figure и figcaption с Codepen

Прежде, чем решить, использовать вам теги figure и figcaption в оформлении страниц, вы можете посмотреть, каким образом они были оформлены в примерах на популярном ресурсе codepen.io. Авторы примеров используют в своем коде не только привычную разметку в html и описание свойств в css , но и различные препроцессоры, такие, как Haml, Pug или SCSS. Если код на вкладках для вас непонятен, перейдите по ссылке Edit on Codepen и выберите в меню справа на нужной вкладке View Compiled HTML (Показать скомпилированный HTML) или View Compiled CSS (Показать скомпилированный CSS).

Пример очень симпатичного оформления профиля актера, автора статьи или пользователя

Используем псевдоклассы ::before и ::after для figure

See the Pen Realistic Polaroid Figures by Kyle Foster (@hkfoster) on CodePen.

Автор Kyle Foster

Описание изображения в виде меток

Очень интересный вариант использования тега figcaption для создания меток показан в примере ниже. Для этого figcaption содержит внутри несколько вложенных div-ов, причем и сам figcaption , и div-ы внутри него имеют абсолютное позиционирование с разными координатами. В зависимости от размера экрана длина выносной линии для меток изменяется с помощью css-переменной --label-length.

See the Pen Responsive image labels #CodePenChallenge cpc-figures by Stephen Lee (@abcretrograde) on CodePen.

Автор Stephen Lee

Простая фотогалерея с описаниями

В этом примере текст из описания (<figcaption>) разбит на 2 строки и выведен поверх фото, размещенного в теге <img>. Просто и приятно.

See the Pen Image-Gallery with caption - html5-Tag, figure figcaption - responsive by Elen (@ambassador) on CodePen.

Автор lck

Пример форматирования галереи изображений

Галерея изображений, основанная на использовании свойств Flexbox-модели для размещения фото в 3 колонки и на использовании тегов  <figure> и <figcaption> для отображения изображений и описания к ним. Обратите внимание, что внутри figcaption размещены 2 div-a: один для названия изображения, второй - для имени автора этого изображения.

See the Pen Figure & Figcaption: #codepenchallenge by miazura (@miazura) on CodePen.

Автор miazura

Фотогалерея с данными об авторе, просмотрах и загрузках

Еще один вариант фотогалереи позволяет на больших экранах увидеть в теге <figcaption> только название фото, а при наведении курсора мыши на картинку -   данные об авторе , просмотрах и загрузках. На экранах  менее 700px все эти данные отображаются сразу. В примере использованы анимации типа transition.

See the Pen Figure & Figcaption #CodePenChallenge by Yanely Ramirez (@yxnely) on CodePen.

Автор Yanely Ramirez

Пример мини-слайдера

В этом примере изображений, размещенных в тегах figure и снабженных figcaption, можно просмотреть при скролле страницы вправо за счет использования grid-контейнера. Здесь использован небольшой JS-код на основе библиотеки RELLAX.

See the Pen Parallax image gallery using Figure & Figcaption - #CodePenChallenge by Booligoosh (@Booligoosh) on CodePen.

Автор Booligoosh

Фотогалерея с перемещением картинок

Пример организации страницы с анимированной прокруткой изображений за счет использования свойства @keyframes и css-трансформации translate3d. В теге <figcaption> размещен заголовок h3 с абсолютным позиционированием и свойством mix-blend-mode: screen.

See the Pen Figure & Figcaption CodePenChallenge by Elen (@ambassador) on CodePen.

Автор parph

Фотогалерея на основе Grid

В этой фотогалерее интересно размещение разных по размеру фото по сетке за счет использования модели Grid. Также здесь использован hover-эффект с всплывающим описанием, немного повернутым за счет использования свойства transform: rotate().

See the Pen Figure + Figcaption by Ryan Mulligan (@hexagoncircle) on CodePen.

Автор Ryan Mulligan

Слайдер на основе тегов figure и figcaption

В этом примере слайдер организован на основе вложенных тегов figure и figcaption, а также анимации с помощью css-свойств @keyframes и animation.

See the Pen slider(pure css/html) figure & figcaption by Sahebt Alezar (@Sahebt_Alezar) on CodePen.

Автор Sahebt Alezar

Мини-фотогалерея с эффектом печатания текста

Фото загружается с анимацией небольшого покачивания. При наведении на изображение мы видим, как печатается текст, размещенный в теге figcaption. Для этого используется JavaScript-код на основе jquery.js.

See the Pen Kandinsky. Typing Effect #codepenchallenge by Natalia Kuznetsova (@lindenalee) on CodePen.

Автор Natalia Kuznetsova 

Пример, демонстрирующий изменение контента при наведении на фото

Используем псевдоклассы ::before и ::after для figure, а также абсолютное позиционирование и анимацию типа transition при наведении курсора на блок с фотографией, причем фото загружается не в теге <img>, а с помощью css-свойства background-image для figure.

See the Pen A <figure> with a <figcaption>... and .date that all:hovers by Elen (@ambassador) on CodePen.

Автор Joshua Ward

Пример изображения с выезжающим описанием

При клике на кнопку More описание, размещенное в коде в теге <figcaption> выезжает вверх. В примере использован svg  с фильтром и немного JS-кода на основе jQuery.

See the Pen Figure &amp; Figcaption (CSS only version) by Tobias Glaus (@tobiasglaus) on CodePen.

Автор  Tobias Glaus

Описание на обороте изображения

В этом примере для того, чтобы прочитать полное описание фото, необходимо нажать на кнопку Read the back, после чего фото повернется к нам своей "обратной стороной". В коде использованы 3D трансформации и JavaScript.

See the Pen Lazy Loading Fig+Figcaption &amp; Flipping Card by Alex Paul (@alex_paul) on CodePen.

Автор  Alex Paul

Описание, появляющееся при наведении курсора мыши на фото

Решение на чистом CSS:  мы видим изначально над изображением текст из абзаца, размещенного непосредственно в теге figure,  а полное описание из  тега figcaption читаем после наведения на фото. Эффект появления основан на абсолютном позиционировании, а также на использовании свойства transform и transition.

See the Pen Figure &amp; Figcaption #codepenchallenge by Elise (@Elisse) on CodePen.

Автор  Elise

Анимированное исчезновение описания картинки

В этом примере внутри тега <figcaption> текст разбит на несколько span-ов, которые визуально размещены вверху и внизу картинки при загрузке страницы за счет абсолютного позиционирования. При наведении курсора мыши они скрываются за счет использования css-свойств animation и @keyframes. В коде использованы переменные css.

See the Pen Playful CSS figure &amp; figcaption by Piotr Galor (@pgalor) on CodePen.

Автор Piotr Galor 

Исчезающее описание

Еще один вариант кода, который не показывает, а наоборот, убирает figcaption для изображения. Очень приятный hover-эффект, в котором при наведении курсора мыши на картинку описание как бы прячется под нее. Используется jQuery и TweenMax.

See the Pen Playful Figure/Figcaption | #CodePenChallenge by Isman Fromes (@ismanfromes) on CodePen.

Автор Isman Fromes

Эффект разрезанного изображения

За счет использования ряда элементов <div class='captures'>, css-свойства clip-path и css-фильтра filter: grayscale(50%) изначально мы видим картинку внутри тега <figure> в виде набора вертикальных полос. При наведении курсора мыши изображение становится цельным, цветным, и появляется его описание в теге <figcaption>.

See the Pen #CodePenChallenge Figure &amp; Figcaption by Elen (@ambassador) on CodePen.

Автор Artem

Анимация при наведении на логотипы

В примере использованы свойства CSS,которые анимируют SVG-изображение при наведении на круг.

See the Pen CSS/SVG Animated Circles by Kyle Edwards (@kyledws) on CodePen.

Несколько интересных hover-эффектов со при наведении на изображение от одного автора

Описание появляется на красном фоне, состоящем из полупрозрачных треугольников.

Автор LittleSnippets.net.

See the Pen #1543 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

Используем белые треугольники для отображения описания.

See the Pen #1401 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

Изображения находятся в кругах и при наведении меняются на иконку. CSS + небольшой код на jQuery.

See the Pen #1566 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

Описание появляется в виде белого прямоугольника. CSS + небольшой код на jQuery.

See the Pen #1321 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

Эффект появления описания в анимированных черных прямоугольниках.

See the Pen #1584 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

Хороший вариант для сайта художников, фотографов или модельеров.

See the Pen #1581 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

Отличный вариант анимированных описаний на разноцветных фонах с использованием css-переменных.

See the Pen Izmir - ImageHover CSS Library - Example 1 by LittleSnippets.net (@littlesnippets) on CodePen.

Интересный эффект для блока с командой. Изображение прявляется при наведении. CSS + небольшой код на jQuery.

See the Pen #1091 - Image with rotating title on hover by LittleSnippets.net (@littlesnippets) on CodePen.

Еще один вариант оформления блока с командой, хотя это и не очень понятно по виду изображений. CSS + небольшой код на jQuery.

See the Pen #1104 - Image hover with slide out title by LittleSnippets.net (@littlesnippets) on CodePen.

Лаконичное описание команды.

See the Pen #1580 - Image Hover by LittleSnippets.net (@littlesnippets) on CodePen.

Следующий пример можно использовать для вывода профиля пользователя.

See the Pen #1578 - Profile Card by LittleSnippets.net (@littlesnippets) on CodePen.

На основе статьи 20 HTML <figure> & <figcaption> with CSS.