Как отображать часть наложенной фотографии?

Question

[Владимир]

Реализовал данную возможность с помощью маски и градиента, но я хочу чтобы блок двигался за мышкой плавно. А transition не работает для linear-gradient. Есть другая возможность реализовать данную идею?

Comments

[Вадим]

А можете описать/продемонстрировать ожидаемый результат более наглядно?
Как должно выглядеть изображение и что должно происходить при движении мышкой

[Владимир]

Вот на этом сайте блоки перемещаются плавно за мышкой, и показывают другие наложенные фотографии. Я хочу реализовать что-то подобное.
www.ai-model.jp
Вот мой код:

let wrapper = document.querySelector('.wrapper'),
        background = document.querySelector('.background');
    const MASK_SIZE = 75;

    wrapper.addEventListener('mousemove', function(e) {
        let x = e.clientX,
            y = e.clientY;
        
        background.style.cssText  = `-webkit-mask-image: 
        linear-gradient(to bottom,  transparent ${y - MASK_SIZE}px, #fff ${y - MASK_SIZE}px ${y + MASK_SIZE}px, transparent ${y + MASK_SIZE}px 100%),
        linear-gradient(to right, transparent ${x - MASK_SIZE}px, #fff ${x - MASK_SIZE}px ${x + MASK_SIZE}px, transparent ${x + MASK_SIZE}px 100%);
                                    mask-image: 
        linear-gradient(to bottom,  transparent ${y - MASK_SIZE}px, #fff ${y - MASK_SIZE}px ${y + MASK_SIZE}px, transparent ${y + MASK_SIZE}px 100%),
        linear-gradient(to right, transparent ${x - MASK_SIZE}px, #fff ${x - MASK_SIZE}px ${x + MASK_SIZE}px, transparent ${x + MASK_SIZE}px 100%);
        `
    })

Я не могу плавно изменять свойство mask-image за движением мышки

Answer 1

[Владимир]

Я решил вопрос с помощью свойства background-image и clip-path

Answer 2

[Elvis]

Смотри в сторону tooltip. например Tippy.js