<div class="wrapper">
    <img class="wrapper__image" src="https://images.unsplash.com/photo-1663875972135-bb6654ed702d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" alt="">
    <p class="wrapper__help-text">Просто подвигай мышкой</p>
</div>

body {
    margin: 0;
    font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.wrapper {
    position: relative;
    min-height: 100vh;
    background-image: url(https://images.unsplash.com/photo-1663077401457-9073e2776fe6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80);
    background-position: 50% 50%;
    background-size: cover;
    overflow: hidden;
}

.wrapper__image {
    --clip-position: -100%;
    --clip-width: 40vw;

    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    display: block;
    transform: translate(-50%, -50%);
    user-select: none;
    object-fit: cover;
    clip-path: polygon(
        calc(var(--clip-position) - var(--clip-width) / 2) 0%,
        calc(var(--clip-position) + var(--clip-width) / 2) 0%,
        calc(var(--clip-position) + var(--clip-width) / 2) 100%,
        calc(var(--clip-position) - var(--clip-width) / 2) 100%
    );
}

.wrapper__help-text {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    text-align: center;
    font-size: 4vmax;
    color: #ffffff;
    transform: translate(-50%, -50%);
    user-select: none;
    transition: opacity 0.35s ease-in-out;
}

const wrapper = document.querySelector('.wrapper');
const image = wrapper.querySelector('.wrapper__image');
const helpText = wrapper.querySelector('.wrapper__help-text');

const getPercentOfX = (event) => {
    const position = event.clientX;
    const width = event.currentTarget.offsetWidth;
    
    return position / width * 100;
};

const updateImageClipPosition = (percent) => {
    image.style.setProperty('--clip-position', `${percent.toFixed(2)}%`);
};

wrapper.addEventListener('mousemove', (event) => updateImageClipPosition(getPercentOfX(event)));

wrapper.addEventListener('mousemove', () => helpText.style.setProperty('opacity', 0), { once: true });