Как добавить эффект увеличения изображения с помощью CSS

Переделывая целевую страницу для мастер-класса AppSync, я хотел добавить эффект увеличения к некоторым изображениям, как, например, к этому:

После некоторого гугления и экспериментов вот что у меня получилось.

<figure class="img-hover-zoom">
  <figcaption>...</figcaption>
  <img src="...">
</figure>

При наведении курсора на тег тег увеличивается. Чтобы сделать этот переход более плавным, можно использовать CSS-переход.

.img-hover-zoom img {
  transition: transform 0.2s ease-out;
}

.img-hover-zoom:hover img {
  transform: scale(1.2);
}

Но одного этого недостаточно, так как изображение будет переполнять родительский контейнер.

Поэтому для тега используйте overflow: hidden, чтобы остановить переполнение.

.img-hover-zoom {
  overflow: hidden;
}

И вуаля, вы получаете красивый эффект увеличения при наведении курсора на изображение 🙂

The post Как добавить эффект увеличения изображения с помощью CSS appeared first on theburningmonk.com.