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

#javascript #jquery #анимация #img

Как можно реализовать вот такую вещь?


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

P.s. я пытался найти в поисковике решение, но не смог сформулировать грамотно запрос.
    

Ответы

Ответ 1

Как то так.



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;
}