Как создать: заголовок наложения изображения

Учимся создавать заголовки наложения изображения при наведении мыши.

Заголовок наложенного изображения

Перенесите мышь на изображение, чтобы увидеть эффект наложения.

Аватар
Мое имя - Билл

Попробуйте сами

Как создать наложение изображения заголовка

Первый шаг - Добавьте HTML：

<div class="container">
  <img src="img_avatar.png" alt="Аватар" class="image">
  <div class="overlay">Мое имя - Джон</div>
</div>

Второй шаг - Добавьте CSS：

* {box-sizing: border-box}
/* Контейнер, в который нужно поместить наложение. Измените ширину по мере необходимости */
.container {
  position: relative;
  width: 50%;
  max-width: 300px;
}
/* Делает изображение адаптивным */
.image {
  display: block;
  width: 100%;
  height: auto;
}
/* Эффект наложенного изображения - над контейнером и изображением */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Прозрачный чёрный */
  color: #f1f1f1;
  width: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}
/* При наведении мыши на контейнер,标题淡入叠加 */
.container:hover .overlay {
  opacity: 1;
}

Попробуйте сами

Соответствующие страницы

Учебное пособие：CSS изображение

Учебное пособие：Как создать эффект叠加 при наведении на изображение