ZorNet.Ru — сайт для вебмастера » HTML и CSS » Плавное увеличение фоновой картинки в CSS

Плавное увеличение фоновой картинки в CSS

Известный эффект, как масштабировать фоновые изображения при помощи HTML и CSS с наведением клика, который смотрится великолепно для сайтов. Вероятно такой эффект вам встречался, где вы наводите курсор на изображение, и оно внутри каркаса начинает медленно увеличиваться, где производит реально неизгладимое впечатление от данной анимации. Их есть множество, то с прокруткой или с другими элементами, здесь рассмотрим простой и надежный с ключевым словом или названием по центру.

Здесь представлен только одна анимация на CSS, как увеличить изображение с помощью CSS. Данный эффект масштабирования с использованием чистого CSS в своей основе распределен на 2 типа, это как увеличение или уменьшение масштаба. Но в данной статье будет анимация на увеличение, так как считаю уменьшение не очень красивым эффектом, ведь если картинка находится сжатой, то еще здесь произойдет уменьшение, что даже как то не корректно смотрится.

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

Переходим к установке:

HTML

Код

<div class="kastus_snumka enlargemen">
<span>ZORNET.RU</span>
</div>

CSS

Код

.kastus_snumka {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 426px;
  height: 242px;
  margin: 2vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-image: url("Ссылка на ваше изображение");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 5px solid rgb(183, 185, 186);
}
.kastus_snumka span {
  position: relative;
  z-index: 1;
}

.enlargemen::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  background-size: cover;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
}

.enlargemen:focus::after, .enlargemen:hover::after {
  transform: scale(1.35);
}

Вы можете установить количество или значение этого увеличения по своему вкусу. Ведь здесь показан тип эффекта увеличения изображения. А также бываем эффект, который создан с помощью JavaScript, но данная конструкция более совершенна и продвинута.

Демонстрация

22 Июня 2022 Загрузок: 2 Просмотров: 949 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0