Текстовый блок поверх изображения

Здесь вы узнаете, как разместить блок с текстом поверх изображения при помощи CSS.


Природа
Природа

Какой красивый рассвет
Попробовать самому »

Как разместить текстовый блок поверх изображения

Шаг 1) Добавляем HTML:

Пример


<div class="container">
  <img src="//msiter.ru/nature.jpg" alt="Природа" style="width:100%;">
  <div class="text-block">
    <h4>Природа</h4>
    <p>Какой красивый рассвет</p>
  </div>
</div>

Шаг 2) Добавляем CSS:

Пример


/* Контейнер для изображения и текста */
.container {
  position: relative;
}

/* Текстовый блок */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

Попробовать самому »