A simple html with a button and two images. Which changes the behavior if the class adds a left or right depends on the mouse. In fact, the CSS code is the following:

.hover-left .left {
    width: var(--hover-width);
}

.hover-left .right {
    width: var(--other-width);
}

.hover-right .right {
    width: var(--hover-width);
}

.hover-right .left {
    width: var(--other-width);
}

Interactivity is added by the event listener in the left and right classes. using the event listener if the mouse enters or the mouse leaves.

left.addEventListener('mouseenter', () => container.classList.add('hover-left'))
left.addEventListener('mouseleave', () => container.classList.remove('hover-left'))

rigth.addEventListener('mouseenter', () => container.classList.add('hover-right'))
rigth.addEventListener('mouseleave', () => container.classList.remove('hover-right'))

Simple code to understand how the behavior of the mouse

You can see the code in this GitHub Repository:  07.split_landing and the demo of the project is here: Split Landing