Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

Вывод подписей к изображениям организовать можно по-разному, например используя различные 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. Подпись размещается вверху, перед изображением

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

Всего комментариев: 4

  • Valery: 6 июня, 2015 в 14:18

    Хорошо. Понравилось.

    Ответить
  • Hosilov: 10 июля, 2016 в 21:51

    Как раз то что искал

    Ответить
  • олег: 21 августа, 2016 в 16:02

    Вопрос такой. А куда это всё вставлять? Стили и код?

    Ответить
  • sqrt3000: 18 апреля, 2019 в 16:23

    Благодарю друже, помог здорово! Адблок я вырубил на твой сайт.)

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>