Як зробити красиві підписи для картинок на HTML та CSS

У цій нотатці я розповім, як додати гарний підпис до картинки, щоб вийшло щось подібне:

підписи

Готовий приклад коду та подивитися результат ви можете у лістингу. Нижче наведено деякі пояснення (дужки в CSS вказують на номер пункту в поясненні).

  1. Контейнер повинен бути такою ж шириною, як і картинка (щоб підпис не вилазив за її межі). Цього можна досягти такими методами:
  2. жорстко задавши обгортці width, що дорівнює ширині картинки. Мінус у тому, що для кожної картинки доведеться робити це вручну. І адаптивну верстку з таким підходом ви зробити не зможете
  3. використовувати float. У разі ширину задавати необов'язково, контейнер сам прийме потрібну. Обгортка залишиться блоковою
  4. використовувати display: inline-block. Наприклад, я обрав саме цей метод. Не забудьте прописати vertical-align, ця властивість потрібна для елементів з display: inline-block
  5. Підпис ми позиціонуватимемо за допомогою position: absolute, так що контейнер повинен її обмежувати.
  6. За замовчуванням зображення мають невеликий відступ знизу. Цим прийомом ми скидаємо його, щоб підпис спирався на межу картинки, а не був нижчим.
  7. Ми хочемо, щоб підпис був на всю ширину картинки (width), а текст при цьому не прилипав до країв (padding). Щоб через це підпис не виліз за межі картинки, прописуємо box-sizing.
  8. Позиціонуємо підпис. Не забудьте вказати z-index, щоб підпис не загубився під картинкою.
  9. Стилізуємо підпис. Можете зробити на власний розсуд.

Варіанти виконання

Показ підпису лише при наведенні на картинку

Якщо ви не хочете, щоб підпис було видно постійно, використовуйте наступний рецепт. новийкод я виніс окремо.

Підпис з атрибуту title

Якщо ви не хочете, щоб текст підпису знаходився в коді, на допомогу прийде властивість content та довільний html-атрибут. Я використовуватиму title. Код мало зміниться щодо першого прикладу: у CSS торкнулися всього два рядки, а в HTML прибрано .caption і додано атрибут title до .image.

Висновок

Ми розглянули базовий спосіб створення підпису для зображення. На цій основі ви можете створювати будь-які варіації наскільки дозволять фантазія і CSS =). Сподіваюся, ця нотатка виявилася для вас корисною.

Нема часу розбиратися? Замовте верстку сайту у мене =)