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

Узнайте, как создать эффект масштабирования наложения при наведении.

Полное масштабирование изображения наложением

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

Аватар
Hello World

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

Как создать эффект наложения масштабирования

Шаг 1 - Добавьте HTML：

<div class="container">
  <img src="img_avatar.png" alt="Аватар" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

Шаг 2 - Добавьте CSS：

/* Контейнер, в котором необходимо разместить слой. Установите ширину по мере необходимости */
.container {
  position: relative;
  width: 50%;
}
/* Сделать изображение адаптивным */
.image {
  width: 100%;
  height: auto;
}
/* Эффект наложения (полное высота и полная ширина) - расположен над контейнером и изображением */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}
/* При наведении мыши на контейнер, текст слоев будет «масштабироваться» для отображения */
.container:hover .overlay {
  transform: scale(1);
}
/* Текст в слое, выравнивание по горизонтали и вертикали居中 */
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

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

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

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

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