Как сделать анимацию похожую на зум?

Question

[Анатолий Богомол]

Кто знает как сделать анимацию при наведении, что бы сначала показать темный фон на весь экран, а при наведении курсором возле курсора в радиусе примерно 400 пикселей показалась картинка. Именно то место картинки на которое наводим. Изначально картинка покрыта фоном и также растянута на весь экран.

Примерно как на этом сайте первый экран. Только здесь 2 картинки используется.
https://brander.ua/

Или хотя бы как это называется? Может есть готовая библиотека?

Comments

[Михаил Р.]

На мобиле я так понимаю, это не работает?

Answer 1

[its2easyy]

mask-image с картинкой в виде круга, который используется как маска для видимой части фоновой картинки, mask-size с нужным размером круга. На секции скрипт который слушает события mouseover, определяет положение курсора и это положение используется для задания mask-position. Плюс немного свойств чтобы это выглядело плавно, типа увеличения mask-size с нуля до нужного размера и плавное изменение mask-position через анимацию. mask-* свойства дополнительно с webkit префиксом чтобы работало везде.
Собственно можете прям у них с сайта все свойства вытащить и под себя переделать