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

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

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

HTML

Синтаксис(разметка html) во всех примерах будет примерно одинаков, тег <figcaption>, который содержит описание для тега <figure>, должен быть первым или последним элементом в группе, всё очень просто.
Так:

<figure>
    <figcaption>
         Подпись к изображению...
    </figcaption>
    <img src="путь до картинки">
</figure>

или так:

<figure>
    <img src="путь до картинки">
    <figcaption>
         Подпись к изображению...
    </figcaption>
</figure>

Внешний вид и расположение подписей будем формировать непосредственно в таблице стилей CSS, предварительно связав все элементы со стилями через определённые классы. Например, я сделал изображения в блоке <figure> «резиновыми», используя процентные значения ширины картинки width: 100%;. Как сделать картинки адаптивными, рассказывал подробно в статье Адаптивные изображения с помощью CSS, кому интересно, можете освежить память.
Во всех случаях базовому контейнеру <figure> определяем относительное позиционирование position: relative;, а подписям (элемент <figcaption>), в вариантах с наложением, определяем абсолютное позиционирование position: absolute;.

1. Подпись размещается вверху, перед изображением

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