<img src='https://images.unsplash.com/photo-1603976246669-17d36a4ebd28?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=900' alt='cats'>

$w: 4vmin;
$r: 50%;
$o: .5*(100% + $r) - $r;

@property --k {
  syntax: '<number>';
  initial-value: 0;
  inherits: false
}

body {
  display: grid;
  margin: 0;
  height: 100vh;
}

img {
  --k: 0;
  --j: calc(1 - var(--k));
  --list: transparent calc(50% - #{$w}), red 0  calc(50% + #{$w}), transparent 0;
  place-self: center;
  object-fit: cover;
  width: 90vmin; height: 90vmin;
  filter: grayScale(var(--j));
  mask: 
    radial-gradient(closest-side, red calc(#{$r} - 1px), transparent #{$r}), 
    radial-gradient(closest-side, 
      transparent calc(#{$r} - #{$o} + var(--k)*2*#{$o} - 1px), 
      red calc(#{$r} - #{$o} + var(--k)*2*#{$o}) calc(var(--k)*100% + var(--j)*#{$r} - 1px), 
      transparent calc(var(--k)*100% + var(--j)*#{$r})), 
    linear-gradient(var(--list)), 
    linear-gradient(90deg, var(--list)), 
    linear-gradient(45deg, var(--list)), 
    linear-gradient(-45deg, var(--list));
  mask-composite: add, intersect, add, add;
  transition: --k .2s ease-out;

  &:hover { --k: 1 }
}