Подпись картинки (теги figure и figcaption) | HTML

Внимание! Статья на переработке. Прежний вариант был перенесён сюда в связи с более подходящим заголовком.

Как сделать надпись под картинкой

Кроме содержания атрибутов alt и title при поиске по картинкам используются тексты, находящиеся в непосредственной близости от изображения. Часто это выглядит как:

Когда-нибудь котёнок выберется из лужи

<!-- HTML5, подходит для резинового дизайна -->

<style>
figure.img {
  margin: 0;
  text-align: center;
}
figure.img img {  /* изображение уменьшается пропорционально экрану браузера */
  max-width: 100%;
  height: auto;
}
figure.img figcaption {  /* стиль описания */
  padding: 0 1%;
  font: italic 90% Georgia,serif;
}
</style>

<figure class="img">
    <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302">
    <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption>
</figure>

Автоматическая нумерация картинок

К стилю выше дописать [доп.информация про счётчики CSS]:

body {
  counter-reset: figures;
}
figure.img figcaption {
  counter-increment: figures;
}
figure.img figcaption:before {
  content: 'Рис.' counter(figures) ' ';
}

Изображение с подписью в рамке

Общий CSS стиль:

<style>
figure.img {
  max-width: 100%;
  margin: 0 auto;
  box-shadow: 0 0 0 5px #fff, 0 0 4px 5px; /* рамка (она же отступ и тень) блока */
}
figure.textizo {
  width: fit-content; /* ширина блока (рисунок+описание) = ширине описания или фото, в зависимости от того, чьё значение больше; нужен -moz- и -webkit- */
}
figure.izo {
  width: min-content; /* ширина блока (рисунок+описание) = ширине изображения; нужен -moz- и -webkit- */
}
figure.img img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
figure.img figcaption {
  max-width: 100%;
  padding: 0 1%;
  font: italic 90% Georgia,serif;
}
</style>

Текст длиннее изображения. Если картинка располагается по центру, то хочется использовать всё пространство родительского блока.

Когда-нибудь котёнок выберется из лужи

<figure class="img textizo">
    <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302">
    <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption>
</figure>

Когда нужно чтобы ширина контейнера была не больше ширины картинки (для Google Chrome см. код ниже, для него нужно обязательно указывать width для figcaption ?!).

Когда-нибудь котёнок выберется из лужи

<figure class="img izo">
    <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302">
    <figcaption>Когда-нибудь котёнок выберется из лужи</figcaption>
</figure>

Если изображение узкое и маленькое и обтекается слева или справа, а текст длинный, то следует ограничить ширину описания.

Длинное, очень длинное, длинное-предлинное описание

<figure class="img izo">
    <img src="http://4.bp.blogspot.com/-eJraU5lCufs/UFa8PpMUv8I/AAAAAAAADLQ/Y5SGHBd91-Q/s1600/smail-bolshoi-palets-vverh.gif" alt="Смайлик большой палец вверх" height="104" width="147"/>
    <figcaption style="width: 300px;">Длинное, очень длинное, длинное-предлинное описание</figcaption>
</figure>

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

К CSS выше добавить:

figure.hover {
  position: relative;
}
figure.hover figcaption {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  width: available; /* 100% минус горизонтальные margin, border и padding; нужен -moz- и -webkit- */
  visibility: hidden;
  background: #fff;
  box-shadow: 0 0 0 5px #fff, -5px 0 4px, 5px 0 4px, 0 5px 4px;
}
figure.hover:hover figcaption {
  visibility: visible;
}

Когда-нибудь котёнок выберется из лужи

<figure class="img izo hover">
    <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg" height="400" width="302">
    <figcaption style="width: 302px;">Когда-нибудь котёнок выберется из лужи</figcaption>
</figure>

Несколько фотографий и одно описание

Про тег figure и figcaption хорошо написано у html5doctor.com: статья 1 (в комментариях тоже можно найти интересные моменты), статья 2, а также следует прочитать первоисточник w3.org. Словом, так тоже будет верно:

Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу

<style>
figure.img {
  max-width: 100%;
}
figure.izo {
  width: min-content;
  margin: 0 auto;
}
figure.tri figure {
  width: 100%;
  margin: 0;
  letter-spacing: 6px;
  white-space: nowrap;
}
figure.img img {
  height: auto;
  margin: 0 auto;
}
figure.tri img {
  display: inline-block;
  max-width: calc(100%/3 - 4px);  /* с учётом того, что фото одинаковой ширины, иначе JavaScript */
}
figure.img figcaption {
  max-width: 100%;
  padding: 0 1%;
  font: italic 90% Georgia,serif;
}
</style>

<figure class="img izo tri">
  <figure>
    <img alt="котёнок мечтает стать львом" src="http://4.bp.blogspot.com/-uXTQrdgmR5A/TVOtm4AfAzI/AAAAAAAABcA/ZPY0DjhgY0o/s00/mechty.jpg">
    <img alt="гадкий утёнок смотрит в лоханку" src="http://1.bp.blogspot.com/-zieFTVCUOhk/UrLBvVdmQnI/AAAAAAAAEOg/_HXG_LQSpfE/s320/gadkiy-utenok.jpg">
    <img alt="гадкий утёнок смотрит в воду, он стал лебедем" src="http://4.bp.blogspot.com/-R4BCZt_KHWY/UrLAiZDDnzI/AAAAAAAAEOQ/U2WFegtrfi8/s00/gadkii-utenok.jpg">
  </figure>
  <figcaption>Когда-нибудь котёнок выберется из лужи. По крайне мере одному уже удалось из гадкого утёнка превратиться в величавую птицу</figcaption>
</figure>

Появление подписи картинки при наведении на неё курсора мышки

пока оно в этой статье Всякие эффекты для вдохновения: 1, 2, 3, 4, 5