Заказать вёрстку
  • verstka.pro

Подписи для картинок на HTML и CSS

В этой заметке я расскажу, как добавить красивую подпись к картинке, чтобы получилось нечто подобное:

Превью результата

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

.image { 		display: inline-block; // (1) 		vertical-align: top; // (1) 		position: relative; // (2) 		img { 			display: block; // (3) 		} 		.caption { 			box-sizing: border-box; // (4) 			width: 100%; // (4) 			padding: 25px; // (4) 			position: absolute; // (5) 			z-index: 2; // (5) 			left: 0; // (5) 			bottom: 0; // (5) 			background-color: rgba(0, 0, 0, .5); // (6) 			text-align: center; // (6) 			color: #fff; // (6) 			font: 11px/16px Tahoma, sans-serif; // (6) 		} 	}

See the Pen Подписи для картинок на HTML и CSS by Alexander (@CSR) on CodePen.

  1. Контейнер должен быть такой же ширины, как и картинка (чтобы подпись не вылазила за её пределы). Этого можно добиться следующими методами:
    • жёстко задав обёртке width, равный ширине картинки. Минус в том, что для каждой картинки придётся делать это вручную. И адаптивную вёрстку с таким подходом вы сделать не сможете
    • использовать float. В данном случае ширину задавать не обязательно, контейнер сам примет нужную. Обёртка останется блочной
    • использовать display: inline-block. Для примера я избрал именно этот метод. Не забудьте прописать vertical-align, это свойство необходимо для элементов с display: inline-block
  2. Подпись мы будем позиционировать с помощью position: absolute, так что контейнер должен её ограничивать.
  3. По умолчанию картинки имеют небольшой отступ снизу. Этим приёмом мы сбрасываем его, чтобы подпись опиралась на границу картинки, а не была ниже.
  4. Мы хотим, чтбы подпись была на всю ширину картинки (width), а текст при этом не прилипал к краям (padding). Чтобы из-за этого подпись не вылезла за границы картинки, прописываем box-sizing.
  5. Позиционируем подпись. Не забудьте указать z-index, чтобы подпись не потерялась под картинкой.
  6. Стилизуем подпись. Можете сделать на своё усмотрение.

Варианты исполнения

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

Если вы не хотите, чтобы подпись была видна постоянно, используйте следующий рецепт. Новый код я вынес отдельно.

.image { 		display: inline-block; 		vertical-align: top; 		position: relative; 		img { 			display: block; 		} 		.caption { 			box-sizing: border-box; 			width: 100%; 			padding: 25px; 			position: absolute; 			z-index: 2; 			left: 0; 			bottom: 0; 			background-color: rgba(0, 0, 0, .5); 			text-align: center; 			color: #fff; 			font: 11px/16px Tahoma, sans-serif; 		} 	}  	.image { 		.caption { 			// показывать подпись будем плавно 			transition: all .5s linear; 			// По умолчанию подпись скрыта 			opacity: 0; 			visibility: hidden; 		} 		// Показываем подпись при наведении 		&:hover { 			.caption { 				opacity: 1; 				visibility: visible; 			} 		} 	}

See the Pen Подписи для картинок на HTML и CSS (hover) by Alexander (@CSR) on CodePen.

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

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

.image { 		display: inline-block; 		vertical-align: top; 		position: relative; 		img { 			display: block; 		} 		&:before { // Теперь это не .caption, а псевдоэлемент 			content: attr(title); // Прописываем атрибут, из которого брать подпись 			box-sizing: border-box; 			width: 100%; 			padding: 25px; 			position: absolute; 			z-index: 2; 			left: 0; 			bottom: 0; 			background-color: rgba(0, 0, 0, .5); 			text-align: center; 			color: #fff; 			font: 11px/16px Tahoma, sans-serif; 		} 	}

See the Pen Подписи для картинок на HTML и CSS (псевдоэлемент) by Alexander (@CSR) on CodePen.

Заключение

Мы рассмотрели базовый способ создания подписи для картинки. На этой основе вы можете создавать любые вариации, насколько позволят фантазия и CSS =). Надеюсь, эта заметка оказалась для вас полезной.

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