Как можно реализовать подобную вещь? (js, jQuery)

Как можно реализовать вот такую вещь?
Пояснение: Есть два изображения, которое наложено одно на другое. Необходимо сделать так чтобы при наведении мышкой на блок, частично исчезало изображение на величину зависящую от правого края до мышки.
P.s. я пытался найти в поисковике решение, но не смог сформулировать грамотно запрос.

Ответ

Как то так.
let $black_white = $('.black_white'), img_width = $('.black_white img').width(), init_split = Math.round(img_width/2); $black_white.width(init_split); $('.before_after_slider').mousemove((e) => { let offX = (e.offsetX || e.clientX - $black_white.offset().left); $black_white.width(offX); }); $('.before_after_slider').mouseleave((e) =>{ $black_white.stop().animate({ width: init_split },1000) }); .before_after_slider { position: relative; margin: 60px; width: 400px; height: 300px; } .before_after_slider > * { position: absolute; } .black_white { overflow: hidden; }