При наведении курсора на рамки объекта фоновое изображение немного двигается

Question

Уже второй день пытаюсь найти возможность сделать, чтобы при наведении на картинку, она условно двигалась за курсором (не выходя за изначальные свои рамки, работа с приближением). Простым языком, я хочу чтобы при наведении на грань объекта его фон чуть уменьшался и давал увидеть немного большую площадь изображения

Вот так до наведения на верхний правый угол

А примерно вот так после

Аналогичный пример с наведением на левый нижний угол:

До

После

Складывается очень сильное ощущение, что я находил ранее возможность это сделать буквально одной строкой кода, а сейчас всё, что предлагают в интернете - полноценные Java-скрипты или как минимум большие прописанные условия в css. Может я пропускаю какое-то свойство для внутренней картинки или что-то подобное, подскажите пожалуйста.

Answer 1

Вот Ваша строчка :) Всё сделано с помощью изменения стилей. Высота и ширина взяты случайные.

let photo = document.getElementById("photo");

photo.onmousemove = function(e) {
    let rect = photo.getBoundingClientRect();
    let percentX = (100 - (e.clientX - rect.left) / rect.width * 100) + "%";
    let percentY = (100 - (e.clientY - rect.top) / rect.height * 100) + "%";
    this.style.backgroundSize = "50%";
    this.style.backgroundPosition = percentX + " " + percentY;
}

photo.onmouseleave = function() {
    this.style.backgroundSize = "100%";
    this.style.backgroundPosition = "0% 0%";
}

#photo {
    position: absolute;
    left: 50px;
    top: 50px;
    background: no-repeat url("https://cnet2.cbsistatic.com/img/-e95qclc6pwSnGE2YccC2oLDW_8=/1200x675/2020/04/16/7d6d8ed2-e10c-4f91-b2dd-74fae951c6d8/bazaart-edit-app.jpg");
    background-size: 100%;
    background-position: 0% 0%;
    width: 100px;
    height: 100px;
    border: 1px #f00 solid
}

<div id="photo">
</div>

rect обновляю каждый раз на случай, если картинка сместится, иначе можно вынести его из события.

БЛОГ НА HUSL

При наведении курсора на рамки объекта фоновое изображение немного двигается

Ответы (1 шт):