Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Image comparison
<div class="image">
<div class="image__img"></div>
<div class="image__img"></div>
</div>
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 + '%')
}
})
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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment