svg(width='0' height='0' aria-hidden='true')
  filter#select(color-interpolation-filters='sRGB' 
              x='0' y='0' width='100%' height='100%')
    feComponentTransfer(result='img_orig')
      feFuncA(type='discrete' tableValues='0 0 1 1 0')
    feColorMatrix(values=`9 -9 -9 0 0 
                          0  2 -4 0 0 
                          0  0  0 0 0 
                          0  0  0 1 0`)
    feColorMatrix(values=`0  0 0 0 0 
                          0  0 0 0 0 
                          0  0 0 0 0 
                          1 -1 0 0 0`)
    feGaussianBlur(stdDeviation='2')
    feComponentTransfer(result='mask')
      feFuncA(type='table' tableValues='-1 4')
    feComposite(in='img_orig' operator='in' result='img_over')
    
    feComponentTransfer(in='SourceGraphic')
      feFuncA(type='table' tableValues='0 0 1 0 0')
    feComposite(in='img_over' operator='in' result='img_mask')
    
    feColorMatrix(in='img_orig' type='saturate' values='0')
    feBlend(in='img_mask' result='img_full')
    
    feComponentTransfer(in='SourceGraphic')
      feFuncA(type='table' tableValues='0 0 1')
    feBlend(in='img_full')

section
  figure.original
    img(src='https://images.unsplash.com/photo-1517111856508-8a6984d65c75?w=800')
    figcaption original image for comparison
  figure.filtered
    img(src='https://images.unsplash.com/photo-1517111856508-8a6984d65c75?w=800')
    figcaption hover effect image - single img element, no JS
section
  figure.original
    img(src='https://wallpapercave.com/wp/wp5206270.jpg')
    figcaption original image for comparison
  figure.filtered
    img(src='https://wallpapercave.com/wp/wp5206270.jpg')
    figcaption hover effect image - single img element, no JS

$c: #212121 #dedede;

@import url('https://fonts.googleapis.com/css2?family=Grandstander:wght@500&display=swap');

html, body, section, figure { display: grid }

html {
  overflow-x: hidden;
  scrollbar-color: crimson #0001
}

body { background: nth($c, 1) }

section {
  filter: drop-shadow(5px 5px 13px #0009)
}

figure {
  --s: -1;
  grid-area: 1/ 1;
  justify-self: center;
  margin: 17.5% 0;
  border: solid .5em nth($c, 2);
  width: min-content;
  translate: calc(var(--s)*30%) calc(var(--s)*35%);
  rotate: calc(var(--s)*15deg);
  font: 500 1em/ 1.25 grandstander, cursive
}

.filtered {
  --s: 1;
  filter: url(#select);
  
  img {
    mask: 
      linear-gradient(90deg, 
          rgb(0, 0, 0, .5) 33.333%, 
          rgb(0, 0, 0, .75) 66.667%) 
      calc((1 - var(--k, 0))*100%)/ 300%;
    transition: mask-position 1.5s ease-in
  }
  
  &:hover { --k: 1 }
}

.original { background: nth($c, 2) }

img {
  width: min(57.5vw, 80vh);
  aspect-ratio: 5/ 3;
  object-fit: cover
}

figcaption {
  padding-top: .5em;
  background: nth($c, 2);
  color: nth($c, 1);
}