Подпись картинки (теги 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
в f t
наверх ↑

14 комментариев:

Анонимный
есть ли возможность автоматом проставлять теги alt и title для изображений в блоггере ?
NMitra
Я такого способа не знаю и поскольку всё равно пишу всё на вкладке "Изменить HTML", то добавление alt не вызывает у меня неудобства. Любопытно то, что в нескольких местах шаблона, например, в заголовке при использовании изображения, всё же данный атрибут применяется.
Анонимный
Хм, а если изображений 10-к или более на статью? Жуть. Раньше мне было все равно, но недавно стал юзать фоторекламу на блоге.
Жаль что этого не хотят решить разработчики Блоггера.
NMitra
Вот у меня тоже такое впечатление, что именно не хотят, а не не могут. Поскольку некоторые другие функции, которые добавленные в блог, удивляют.
Анонимный
1
Olga
Я сделала шапку блога в xHeader,картинку (часть картинки)я взяла на бесплатных изображениях,т.е.мне ее прописывать не надо. Как правильно записать HTML код, как будут просаны теги alt и title
NMitra
Если вы про http://3.bp.blogspot.com/-pI5NALFNY14/T0jg92DlVrI/AAAAAAAAAGg/QgQrIsLaKns/s1600/suberb%2B2%2B%25D1%2588%25D0%25B0%25D0%25BF%25D0%25BA%25D0%25B0%2B%25D0%25B1%25D0%25BB%25D0%25BE%25D0%25B3%25D0%25B0%2B2.jpg , то она является фоновым изображением, прописана через стили, alt и title не требуются.
Svetlana Kuzmina
Добрый день! Я только начинающий блоггер, подскажите, пожалуйста, КАК сместить картинку в заголовке блога, чтобы она была СПРАВА? Заранее спасибо за помощь!
http://stylistjournal.blogspot.ru/
NMitra
Добрый день. Справа от чего? Картинку нужно ужать?
Svetlana Kuzmina
Наталья, спасибо, разобралась.
Irina Sanirio
Хочу, чтобы все изображения в блоге имели простую рамку с тенью и подпись находилась в рамке. Скопировала первый код из "Изображение с подписью в рамке", вставила в шаблон (в CSS). Не работает.
NMitra
То что в style - эту часть нужно вставить туда где CSS.
А ниже, после
<figure class="img">
,включительно, это нужно добавлять в тело сообщения на вкладке HTML.

Сначала потренируйтесь, весь код целиком добавьте в сообщение на вкладке HTML.

Я пишу всю статью с включенным режимом HTML, мне не составит труда пару строк. А вам не думаю, что будет сподручно каждый раз переключаться.
BUTAMUHbI4
"Когда-нибудь котёнок выберется из лужи". Тут смысл более широкий, чем кажется на самом деле. Образы слов следующие:

"котёнок" - это ребёнок, а в некоторых случаях и более объемлющее значение: человек.
"лужа" - это психологические (и только, т.к. всё остальное пляшет от психики человека) рамки, в которые загоняют котёнка с момента его появления на свет (и хуже всего то, что в большей степени это делают его родители на подсознательном уровне, т.к. сами росли в таких же рамках).

Отсюда рождается следующее:
Зачем загонять котёнка в лужу самОй постановкой изначального предложения? Ведь даже неоднозначное наречие "когда-нибудь" уже внедряет в подсознание котёнка возможность "вечного" пребывания в луже, т.к. есть вариант, что "когда-нибудь" никогда не случится (котёнок может просто умереть несколько раньше)..

ПС: это я так, лирика..))
NMitra
:)