<div class='card' style='--k: 50'>
	<input type='range'/>
</div>
$img: url(https://images.unsplash.com/photo-1611845528017-75215e6d662c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=1600);
$t: .25s;

$card-0: 8em;
$card-1: 80;
$card-a: 10deg;

$thumb-w: 5em;
$thumb-r: .5*$thumb-w;
$thumb-l: 2px;
$thumb-c: #fff;

$arrow-s: 37.5%;
$arrow-a: 60deg;

$label-l: 15;

@mixin track() {
	border: none;
	width: 100%; height: 100%;
	background: 
		linear-gradient(90deg, transparent var(--p), #fff 0), 
		$img 50%/ cover;
	background-blend-mode: exclusion
}

@mixin thumb() {
	--list: #{$thumb-c} #{$arrow-a}, transparent 0%;
	border: none;
	width: $thumb-w; height: 100%;
	background: 
		conic-gradient(from 90deg - .5*$arrow-a, var(--list)) 
			0/ #{$arrow-s}, 
		conic-gradient(from -90deg - .5*$arrow-a, var(--list)) 
			100%/ #{$arrow-s}, 
		radial-gradient(circle, 
			transparent calc(#{$thumb-r} - #{$thumb-l} - 1px), 
			$thumb-c calc(#{$thumb-r} - #{$thumb-l}) calc(#{$thumb-r} - 1px), 
			transparent $thumb-r), 
		linear-gradient(
			$thumb-c calc(50% - #{$thumb-r} + .5*#{$thumb-l}), 
			transparent 0 calc(50% + #{$thumb-r} - .5*#{$thumb-l}), 
			$thumb-c 0) 50%/ #{$thumb-l};
	background-repeat: no-repeat;
	filter: drop-shadow(2px 2px 3px #000);
	cursor: ew-resize
}

* { margin: 0 }

body, div { display: grid }

body {
	overflow-x: hidden;
	height: 100vh;
	perspective: 35em;
	background: #333
}

.card {
	--hl: 0;
	--dif-inf: clamp(0, calc(var(--k) - #{$label-l}), 1);
	--dif-sup: clamp(0, calc(100 - #{$label-l} - var(--k)), 1);
	justify-content: space-between;
	place-self: center;
	overflow: hidden;
	width: Max(#{$card-0}, calc(#{$card-1}*1vw));
	height: Max(#{$card-0}, calc(#{$card-1}*1vh));
	border-radius: .5em;
	box-shadow: 4px 4px 23px;
	filter: sepia(calc(1 - var(--hl)));
	transition: $t;
	transition-property: transform, filter;
	
	&::before, &::after {
		--q: 0;
		--not-q: calc(1 - var(--q));
		z-index: 1;
		grid-area: 1/ calc(1 + var(--q));
		align-self: start;
		margin: .5em;
		padding: 0 .25em;
		border-radius: .25em;
		opacity: 
			calc(var(--hl)*(var(--not-q)*var(--dif-inf) + 
											var(--q)*var(--dif-sup)));
		background: tomato;
		font: 300 1em/ 1.5 lato, sans-serif;
		text-transform: uppercase;
		filter: Invert(var(--q));
		pointer-events: none;
		transition: opacity $t;
		content: 'before'
	}
	
	&::after {
		--q: 1;
		content: 'after'
	}
	
	&:hover, &:focus-within { --hl: 1 }
	
	&:hover {
		transform: 
			rotatex(calc(clamp(-.5, var(--j), .5)*#{$card-a})) 
			rotatey(calc(clamp(-.5, var(--i), .5)*#{-$card-a}));
	}
}

[type='range'] {
	&, &::-webkit-slider-thumb, 
	&::-webkit-slider-runnable-track { -webkit-appearance: none }
	
	--p: calc(#{$thumb-r} + var(--k)*(100% - #{$thumb-w})/100);
	grid-area: 1/ 1/ span 1/ span 2;
	justify-self: center;
	width: calc(100% + #{$thumb-w});
	cursor: pointer;
	
	&::-webkit-slider-runnable-track { @include track }
	&::-moz-range-track { @include track }
	
	&::-webkit-slider-thumb { @include thumb }
	&::-moz-range-thumb { @include thumb }
	
	&:focus { outline: none }
}
View Compiled
/*
Created for my Taming Blend Modes: `difference` and `exclusion` (https://css-tricks.com/taming-blend-modes-difference-and-exclusion/) article on CSS-Tricks - check it out for context!
*/

const _CARD = document.querySelector('.card');

let rect;

function setRect() { rect = _CARD.getBoundingClientRect() }

setRect();

addEventListener('input', e => {
	_CARD.style.setProperty('--k', +e.target.value)
}, false);

addEventListener('resize', e => setRect, false);

_CARD.addEventListener('mousemove', e => {
	_CARD.style.setProperty('--i', +((e.clientX - rect.left)/rect.width - .5).toFixed(2));
	_CARD.style.setProperty('--j', +((e.clientY - rect.top)/rect.height - .5).toFixed(2));
}, false);
View Compiled

External CSS

  1. https://codepen.io/thebabydino/pen/evPbxv.scss

External JavaScript

  1. https://codepen.io/thebabydino/pen/evPbxv.js