Image Effects Implemented by @bennettfeely

none
pencil
watercolor
emboss
colored pencil
chalkboard
colored chalkboard
airbrush
hallucination
flannel
Low Ink (horizontal)
Low Ink (vertical)
collage
mosaic
photo border
infrared
night vision
warhol
selective color
Mirror (horizontal)
Mirror (vertical)
.pencil-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (background-blend-mode: difference) {
  .pencil-effect {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
}

.pencil-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: invert(1)) and (background-blend-mode: difference) {
    background-image: $url, $url;
    background-blend-mode: difference;
    background-position:
      calc(50% - 1px) calc(50% - 1px),
      calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
}
.watercolor-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
  .watercolor-effect {
    position: relative;
    overflow: hidden;
  }
  .watercolor-effect:before, .watercolor-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
  }
  .watercolor-effect:before {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
    box-shadow: inset 0 0 0 1px black;
  }
  .watercolor-effect:after {
    background-image: url(photo.jpg);
    background-position: center;
    mix-blend-mode: multiply;
    filter: brightness(1.3) blur(2px) contrast(2);
  }
}

.watercolor-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
    position: relative;
    overflow: hidden;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
    }

    &:before {
      background-image: $url, $url;
      background-blend-mode: difference;
      background-position:
        calc(50% - 1px) calc(50% - 1px),
        calc(50% + 1px) calc(50% + 1px);
      filter: brightness(2) invert(1) grayscale(1);
      box-shadow: inset 0 0 0 1px black;
    }

    &:after {
      background-image: $url;
      background-position: center;
      mix-blend-mode: multiply;
      filter: brightness(1.3) blur(2px) contrast(2);
    }
  }
}
.emboss-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
  .emboss-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference, screen;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
    filter: brightness(2) invert(1) grayscale(1);
  }
}

.emboss-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
    background-image: $url, $url, $url;
    background-blend-mode: difference, screen;
    background-position:
      calc(50% - 1px) calc(50% - 1px),
      calc(50% + 1px) calc(50% + 1px),
      center;
    filter: brightness(2) invert(1) grayscale(1);
  }
}
.colored-pencil-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: invert(1)) and (mix-blend-mode: color) {
  .colored-pencil-effect {
    position: relative;
  }
  .colored-pencil-effect:before, .colored-pencil-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    box-shadow: inset 0 0 0 1px black;
  }
  .colored-pencil-effect:before {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(2) invert(1) grayscale(1);
  }
  .colored-pencil-effect:after {
    background: inherit;
    mix-blend-mode: color;
  }
}

.colored-pencil-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: invert(1)) and (mix-blend-mode: color) {
    position: relative;

    &:before,
    &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover;
      box-shadow: inset 0 0 0 1px black;
    }

    &:before {
      background-image: $url, $url;
      background-blend-mode: difference;
      background-position:
        calc(50% - 1px) calc(50% - 1px),
        calc(50% + 1px) calc(50% + 1px);
      filter: brightness(2) invert(1) grayscale(1);
    }

    &:after {
      background: inherit;
      mix-blend-mode: color;
    }
  }
}
.chalkboard-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: grayscale(1)) and (background-blend-mode: difference) {
  .chalkboard-effect {
    background-image: url(photo.jpg), url(photo.jpg);
    background-blend-mode: difference;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
    filter: brightness(1.5) grayscale(1);
  }
}

.chalkboard-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: grayscale(1)) and (background-blend-mode: difference) {
    background-image: $url, $url;
    background-blend-mode: difference;
    background-position:
      calc(50% - 1px) calc(50% - 1px),
      calc(50% + 1px) calc(50% + 1px);
    filter: brightness(1.5) grayscale(1);
  }
}
.colored-chalkboard-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
  .colored-chalkboard-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: cover;
    background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
    background-blend-mode: color, difference;
    filter: brightness(2);
  }
}

.colored-chalkboard-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
    background-image: $url, $url, $url;
    background-size: cover;
    background-position:
      calc(50% - 1px) calc(50% - 1px),
      calc(50% + 1px) calc(50% + 1px),
      center;
    background-blend-mode: color, difference;
    filter: brightness(2);
  }
}
.airbrush-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
  .airbrush-effect {
    position: relative;
    overflow: hidden;
  }
  .airbrush-effect:after {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
    mix-blend-mode: multiply;
  }
}

.airbrush-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
    position: relative;
    overflow: hidden;

    &:after {
      display: block;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
      mix-blend-mode: multiply;
    }
  }
}
.hallucination-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (mix-blend-mode: multiply) {
  .hallucination-effect {
    position: relative;
    overflow: hidden;
    background-color: magenta;
    background-blend-mode: screen;
  }
  .hallucination-effect:before, .hallucination-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    mix-blend-mode: multiply;
    transform: scale(1.05);
  }
  .hallucination-effect:before {
    background-color: yellow;
    background-blend-mode: screen;
    transform-origin: top left;
  }
  .hallucination-effect:after {
    background-color: cyan;
    background-blend-mode: screen;
    transform-origin: bottom right;
  }
}

.hallucination-effect {
  $url : url(photo.jpg);
  $offset : 5px;

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (mix-blend-mode: multiply) {
    position: relative;
    overflow: hidden;
    background-color: magenta;
    background-blend-mode: screen;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      mix-blend-mode: multiply;
      transform: scale(1.05);
    }

    &:before {
      background-color: yellow;
      background-blend-mode: screen;
      transform-origin: top left;
    }

    &:after {
      background-color: cyan;
      background-blend-mode: screen;
      transform-origin: bottom right;
    }
  }
}
.flannel-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .flannel-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-position: center;
    background-size: 100%, 100000% 100%, 100% 100000%;
    background-blend-mode: overlay;
  }
}

.flannel-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (background-blend-mode: overlay) {
    background-image: $url, $url, $url;
    background-position: center;
    background-size: 100%, 100000% 100%, 100% 100000%;
    background-blend-mode: overlay;
  }
}
.low-ink-x-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: screen, overlay) {
  .low-ink-x-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 100% 100%, 10000% 100%;
    background-blend-mode: screen, overlay;
  }
}

.low-ink-x-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (background-blend-mode: screen, overlay) {
    background-image:  $url, $url, $url;
    background-size: 100% 100%, 10000% 100%;
    background-blend-mode: screen, overlay;
  }
}
.low-ink-y-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: screen, overlay) {
  .low-ink-y-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 100% 100%, 100% 1000%;
    background-blend-mode: screen, overlay;
  }
}

.low-ink-y-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (background-blend-mode: screen, overlay) {
    background-image:  $url, $url, $url;
    background-size: 100% 100%, 100% 1000%;
    background-blend-mode: screen, overlay;
  }
}
.collage-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .collage-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-size: 200%, 80%, 60%, 50%, 40%, 100%;
    background-position: 50%, 80%, 30%, 0;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
  }
}

.collage-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (background-blend-mode: overlay) {
    background-image: $url, $url, $url, $url, $url, $url;
    background-size: 200%, 80%, 60%, 50%, 40%, 100%;
    background-position: 50%, 80%, 30%, 0;
    background-blend-mode: overlay;
    background-repeat: no-repeat;
  }
}
.mosaic-effect {
  background-image: url(photo.jpg), url(photo.jpg);
  background-size: cover, 5% 5%;
  background-position: center;
  background-blend-mode: overlay;
}

.mosaic-effect {
  $url : url(photo.jpg);

  background-image: $url, $url;
  background-size: cover, 5% 5%;
  background-position: center;
  background-blend-mode: overlay;
}
.photo-border-effect {
  background-image: url(photo.jpg), url(photo.jpg);
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}

.photo-border-effect {
  $url : url(photo.jpg);

  background-image: $url, $url;
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}
.infrared-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}

.infrared-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}
.night-vision-effect {
  background-image: url(photo.jpg), radial-gradient(#0F0, #000), repeating-linear-gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5px, transparent 5px);
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}

.night-vision-effect {
  $url : url(photo.jpg);
  $line-width: 5px;

  background-image:
    $url,
    radial-gradient(
      #0F0,
      #000
    ),
    repeating-linear-gradient(
      transparent 0,
      rgba(0,0,0,0.1) $line-width/2,
      transparent $line-width
    );
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}
.warhol-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: color) {
  .warhol-effect {
    background-image: linear-gradient(#14EBFF 0, #14EBFF 50%, #FFFF70 50%, #FFFF70 100%), linear-gradient(#FF85DA 0, #FF85DA 50%, #AAA 50%, #AAA 100%), url(photo.jpg);
    background-size: 50% 100%, 50% 100%, 50% 50%;
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: color;
  }
}

.warhol-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (background-blend-mode: color) {
    background-image:
      linear-gradient(
        #14EBFF 0,
        #14EBFF 50%,
        #FFFF70 50%,
        #FFFF70 100%
      ),
      linear-gradient(
        #FF85DA 0,
        #FF85DA 50%,
        #AAA 50%,
        #AAA 100%
      ),
      $url;
    background-size: 50% 100%, 50% 100%, 50% 50%;
    background-position: top left, top right;
    background-repeat: no-repeat, no-repeat, repeat;
    background-blend-mode: color;
  }
}
.selective-color-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (filter: brightness(3)) and (mix-blend-mode: color) {
  .selective-color-effect {
    position: relative;
  }
  .selective-color-effect:before, .selective-color-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    background-color: red;
    background-blend-mode: screen;
    mix-blend-mode: color;
    filter: brightness(3);
  }
}

.selective-color-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (filter: brightness(3)) and (mix-blend-mode: color) {
    position: relative;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit;
      background-color: red;
      background-blend-mode: screen;
      mix-blend-mode: color;
      filter: brightness(3);
    }
  }
}
.mirror-x-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (transform: scaleX(-1)) {
  .mirror-x-effect {
    position: relative;
  }
  .mirror-x-effect:before, .mirror-x-effect:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background: inherit;
  }
  .mirror-x-effect:before {
    left: 0;
    right: 50%;
    transform: scaleX(-1);
  }
  .mirror-x-effect:after {
    left: 50%;
    right: 0;
  }
}

.mirror-x-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (transform: scaleX(-1)) {
    position: relative;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      background: inherit;
    }

    &:before {
      left: 0;
      right: 50%;
      transform: scaleX(-1);
    }

    &:after {
      left: 50%;
      right: 0;
    }
  }
}
.mirror-y-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (transform: scaleY(-1)) {
  .mirror-y-effect {
    position: relative;
  }
  .mirror-y-effect:before, .mirror-y-effect:after {
    display: block;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    background: inherit;
  }
  .mirror-y-effect:before {
    top: 0;
    bottom: 50%;
    transform: scaleY(-1);
  }
  .mirror-y-effect:after {
    top: 50%;
    bottom: 0;
  }
}

.mirror-y-effect {
  $url : url(photo.jpg);

  background-image: $url;
  background-size: cover;
  background-position: center;

  @supports (transform: scaleY(-1)) {
    position: relative;

    &:before, &:after {
      display: block;
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      background: inherit;
    }

    &:before {
      top: 0;
      bottom: 50%;
      transform: scaleY(-1);
    }

    &:after {
      top: 50%;
      bottom: 0;
    }
  }
}