Главная » HTML & CSS » Фиксированные подписи к изображениям

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

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

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

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

<figure class="ink-image">
    <figcaption>
      Подпись размещается вверху перед изображением.
    </figcaption>
    <img src="img/img-1.jpg">
</figure>
/* группируем картинки */
figure {
    margin: 0px;
}
/* position: relative; обязательно, остальное по вкусу */
figure.ink-image {
    position: relative;
    border: 1px solid #555;
}
/* изображения резиновые */
figure.ink-image > img {
    border: 0px none;
    width: 100%;
    vertical-align: top;
}
/* формируем подписи к картинкам */
figure.ink-image > figcaption {
    padding: 1em;
    background: none repeat scroll 0% 0% #FFF;
    line-height: 1.3;
    font-family: 'Roboto', sans-serif;  
    font-weight: 400;
}

 

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

Следующий вариант подписи размещённой под изображением. В отличи от первого варианта элемент figcaption прописываем после тега <img>, все необходимые стили задаём в css, или же оставляем как есть. Думаю основной принцип группировки понятен, короткие комментарии в коде css, помогут вам сориентироваться быстрее.
 

<figure class="ink-image">
   <img src="img/img-2.jpg">
   <figcaption>
      Подпись размещается внизу после изображения.
   </figcaption>
</figure>
/* группируем картинки */
figure {
    margin: 0px;
}
/* position: relative; обязательно, остальное по вкусу */
figure.ink-image {
    position: relative;
    border: 1px solid #555;
}
/* изображения резиновые */
figure.ink-image > img {
    border: 0px none;
    width: 100%;
    vertical-align: top;
}
/* формируем подписи к картинкам */
figure.ink-image > figcaption {
    padding: 1em;
    background: none repeat scroll 0% 0% #FFF;
    line-height: 1.3;
    font-family: 'Roboto', sans-serif;  
    font-weight: 400;
}

 

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

В последнее время, очень часто используется вывод подписей непосредственно на теле изображения, визуальный эффект наложения, с полупрозрачным фоном, или же совсем без фона. В данном примере демонстрируется подпись расположенная поверх картинки, прижатая к верхнему краю на слегка прозрачном фоне. Стили для этого вида подписей выделены в отдельный класс class="over-top", цвет фона определяется в свойстве background в формате rgba, изменяя значения альфа-канала от 0 до 1, вы легко можете задать степень прозрачности, по умолчанию выставил промежуточное значение 0.5 — полупрозрачность элемента.
 

<figure class="ink-image">
    <img src="img/img-3.jpg">
    <figcaption class="over-top">
       Подпись поверх изображения, сверху, слегка прозрачный фон.
    </figcaption>
</figure>
/* группируем картинки */
figure {
    margin: 0px;
}
/* position: relative; обязательно, остальное по вкусу */
figure.ink-image {
    position: relative;
    border: 1px solid #555;
}
/* изображения резиновые */
figure.ink-image > img {
    border: 0px none;
    width: 100%;
    vertical-align: top;
}
/* формируем подписи к картинкам */
figure.ink-image > figcaption {
    padding: 1em;
    background: none repeat scroll 0% 0% #FFF;
    line-height: 1.3;
    font-family: 'Roboto', sans-serif;  
    font-weight: 400;
}
/* подпись поверх картинки сверху */
figcaption.over-top {
    background: none repeat scroll 0% 0% rgba(255, 255, 255, 0.7);
    border: medium none;
    position: absolute;
    top: 0px;
    width: 100%;
}

 

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

Всё тоже самое что и в предыдущем примере, разница только в расположении подписи. В этом варианте подпись прижата к нижнему краю изображения, работает свойство bottom: 0px; при абсолютном позиционировании position: absolute;.
 

 
 

 

5. Подпись на изображении строго по центру

Таким способом чаще всего размещают заголовки статей или слоганы на полноэкранных картинках и широкоформатных слайдерах. В связке с анимацией css переходов появления, можно добиться потрясающих результатов. Базовая конструкция фиксированного расположения подписи строго по центру изображения, будет выглядеть примерно так:
 

<figure class="ink-image">
  <img src="img/img-5.jpg">
  <figcaption class="center">
    Подпись по центру
  </figcaption>
</figure>
/* группируем картинки */
figure {
    margin: 0px;
}
/* position: relative; обязательно, остальное как вставит)) */
figure.ink-image {
    position: relative;
    border: 1px solid #555;
}
/* изображения резиновые */
figure.ink-image > img {
    border: 0px none;
    width: 100%;
    vertical-align: top;
}
/* формируем подписи к картинкам */
/* подпись строго по центру */
figure.ink-image > figcaption.center {
  background: none;
  position: absolute;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  top: 50%;
  left: 50%;
  font-size: 2rem;
  transform: translate(-50%, -50%);
}

 

6. Выделенные подписи с фоновой заливкой

В завершение парочка примеров подписей расположенных в разных углах изображения, выделенных фоновой заливкой того или иного цвета. Размер контейнера подписей <figcaption> соответствует размеру текстового содержания, включая внутренние отступы padding: 4px 8px;. Расположение подписей устанавливается с помощью свойств left: отправляя влево или right: отправляя вправо. В примере показан вариант расположения подписей в нижних углах картинки, задействован отступ от нижнего края, свойство bottom:. Соответственно, чтобы расположить подписи в верхних углах, достаточно использовать top:, цифровые значения опционально.
 

<figure class="ink-image">
  <img src="img/img-6.jpg">
  <figcaption class="dark">
     Подпись на тёмном фоне.
  </figcaption>
</figure>
<figure class="ink-image">
  <img src="img/img-7.jpg">
  <figcaption class="light">
     Подпись на светлом фоне.
  </figcaption>
</figure>
/* группируем картинки */
figure {
    margin: 0px;
}
/* position: relative; обязательно, остальное опционально */
figure.ink-image {
    position: relative;
    border: 1px solid #555;
}
/* изображения резиновые */
figure.ink-image > img {
    border: 0px none;
    width: 100%;
    vertical-align: top;
}
/* формируем подписи к картинкам */
figure.ink-image > figcaption {
    padding: 1em;
    line-height: 1.3;
    font-family: 'Roboto', sans-serif;  
    font-weight: 400;
}
/* выделенные подписи с фоном */
/* подпись на тёмном фоне */
figure.ink-image > figcaption.dark {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.75);
  padding: 4px 8px;
  color: white;
  margin: 0;
  font: 14px Sans-Serif;
}
/* подпись на светлом фоне */
figure.ink-image > figcaption.light {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.75);
  padding: 4px 8px;
  color: black;
  margin: 0;
  font: 14px Sans-Serif;  
}

 

На этом пожалуй и всё! Конечно, это далеко не все варианты расположения подписей на изображениях, всё ограничивается лишь фантазией разработчика. Экспериментируя с параметрами, добавив различные эффекты анимации, можно добиться замечательных результатов. Научившись делать подписи фиксированными, в дальнейшем не составит труда сделать их, напрмер, всплывающими при наведении. При этом неважно, будете вы использовать элементы <figure> и <figcaption>, или привычные div-контейнеры с дополнительными элементами, для реализации подписей к картинкам.

Исходники с примерами упаковал в архив и выложил в облаке на Яндекс.Диск, откуда вы запросто сможете их скачать:

С Уважением, Андрей .

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

3 комментария
  1. Хорошо. Понравилось.

    Ответить
  2. Hosilov:

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

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

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru