//- sample
- imgsrc = 'https://images.unsplash.com/photo-1551939055-1dda45f90f24?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=60'

//- filter store
svg#filters
  filter#fe-edge(primitiveUnits='objectBoundingBox')
    feColorMatrix(type='luminanceToAlpha')
    feMorphology(operator='erode' radius='0.016')
    feComponentTransfer
      feFuncR(type='table' tableValues='1 1')
      feFuncG(type='table' tableValues='1 1')
      feFuncB(type='table' tableValues='1 1')
      feFuncA(type='table' tableValues='0 1')
    feBlend(in='SourceGraphic' mode='screen')

.wrap
  .no-fx
    img.ref(src=imgsrc)
  .post-fx
    img.fx(src=imgsrc)

View Compiled
//// structure

body {
  display:grid;
  place-content:center;
  min-height:100vh;
}

.wrap {
  display:block; width:50vmin; height:50vmin;
  position:relative;
  transform-style:preserve-3d;
  > * {
    display:grid; width:100%; height:100%;
    place-items:center;
    position:absolute; top:0; left:0;
    > img {
      display:block; max-height:100%; max-width:100%;
    }
  }
}

//// filter

#filters {
  height:0; width:0; // hide
}

.post-fx {
  .fx{filter:url(#fe-edge);}
  filter:none; //fx after fe-edge
}

//// anim

@keyframes f {
  from,45%{transform:translate3d(0, 0, 10px)}
  50%{transform:translate3d(-10%, 0, 10px)}
  55%,to{transform:translate3d(0, 0, -10px)}
}

.wrap {
  .no-fx{animation:3s f infinite alternate;}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.