Image comparison

image-comparison.markdown

Image comparison

A Pen by Tobias Reich on CodePen.

License.

index.html

<div class="image">
	<div class="image__img"></div>
	<div class="image__img"></div>
</div>

script.babel

document.querySelectorAll('.image').forEach((elem) => {
	
	let x, width
	
	elem.onmouseenter = () => {
		
		const size = elem.getBoundingClientRect()
		
		x = size.x
		width = size.width
		
	}
	
	elem.onmousemove = (e) => {
		
		const horizontal = ((e.clientX - x) / width) * 100
		
		elem.style.setProperty('--x', horizontal + '%')
		
	}

})

style.scss

body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: #111;
}

.image {
	
	--width: 794px;
	--height: 446px;
	
	position: relative;
	width: var(--width);
	height: var(--height);
	overflow: hidden;
	
	&__img {
		position: absolute;
		height: 100%;
		background: url('https://images.unsplash.com/photo-1498248193836-88f8c8d70a3f?w=2382&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');
		background-size: var(--width) var(--height);
		
		&:first-child {
			left: 0;
			width: 100%;
			background-position: center left;
		}
		
		&:last-child {
			right: 0;
			width: calc(100% - var(--x, 50%));
			background-position: center right;
			filter: grayscale(100%);
			box-shadow: inset 2px 0 0 #111, -2px 0 0 #111;
		}
	}
	
}