/* Pencil effect ================================================================== */
.pencil-effect {
   background-image: url(photo.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: invert(1)) or (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);
      -webkit-filter: brightness(2) invert(1) grayscale(1);
      filter: brightness(2) invert(1) grayscale(1);
      box-shadow: inset 0 0 0 1px black;
   }
}

/* Watercolor effect ============================================================== */
.watercolor-effect {
   background-image: url(photo.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: blur(2px)) or (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);
      -webkit-filter: brightness(2) invert(1) grayscale(1);
      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;
      -webkit-filter: brightness(1.3) blur(2px) contrast(2);
      filter: brightness(1.3) blur(2px) contrast(2);
   }
}

/* Emboss effect ================================================================== */
.emboss-effect {
   background-image: url(photo.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: invert(1)) or (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;
      -webkit-filter: brightness(2) invert(1) grayscale(1);
      filter: brightness(2) invert(1) grayscale(1);
   }
}

/* Colored Pencil effect ========================================================== */
.colored-pencil-effect {
   background-image: url(photo.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: invert(1)) or (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);
      -webkit-filter: brightness(2) invert(1) grayscale(1);
      filter: brightness(2) invert(1) grayscale(1);
   }

   .colored-pencil-effect:after {
      background: inherit;
      mix-blend-mode: color;
   }
}

/* Chalkboard effect ============================================================== */
.chalkboard-effect {
   background-image: url(photo.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: grayscale(1)) or (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);
      -webkit-filter: brightness(1.5) grayscale(1);
      filter: brightness(1.5) grayscale(1);
   }
}

/* Colored chalkboard effect ====================================================== */
.colored-chalkboard-effect {
   background-image: url(photo.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: brightness(2)) or (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;
      -webkit-filter: brightness(2);
      filter: brightness(2);
   }
}

/* Airbrush effect ================================================================ */
.airbrush-effect {
   background-image: url(photo.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: blur(5px) contrast(5)) or (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;
      -webkit-filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
      filter: brightness(1.5) saturate(100) blur(5px) contrast(5);
      mix-blend-mode: multiply;
   }
}

/* Hallucination effect =========================================================== */
.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;
      -webkit-transform: scale(1.05);
      transform: scale(1.05);
   }

   .hallucination-effect:before {
      background-color: yellow;
      background-blend-mode: screen;
      -webkit-transform-origin: top left;
      transform-origin: top left;
   }

   .hallucination-effect:after {
      background-color: cyan;
      background-blend-mode: screen;
      -webkit-transform-origin: bottom right;
      transform-origin: bottom right;
   }
}

/* Flannel effect ================================================================= */
.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;
   }
}

/* Low ink (horizontal) effect ==================================================== */
.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 (vertical) effect ====================================================== */
.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;
   }
}

/* Collage effect ================================================================= */
.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;
   }
}

/* Mosaic effect ================================================================== */
.mosaic-effect {
   background-image: url(photo.jpg), url(photo.jpg);
   background-size: cover, 5% 5%;
   background-position: center;
   background-blend-mode: overlay;
}

/* Photo border effect ============================================================ */
.photo-border-effect {
   background-image: url(photo.jpg), url(photo.jpg);
   background-position: center;
   background-size: 60%, 20%;
   background-repeat: no-repeat, repeat;
}

/* Infrared effect ================================================================ */
.infrared-effect {
   background-image: url(photo.jpg);
   background-size: cover;
   background-position: center;
   -webkit-filter: hue-rotate(180deg) saturate(2);
   filter: hue-rotate(180deg) saturate(2);
}

/* Night vision effect ============================================================ */
.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;
}

/* Warhol effect ================================================================== */
.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;
   }
}

/* Selective color effect ========================================================= */
.selective-color-effect {
   background-image: url(photo.jpg);
   background-size: cover;
   background-position: center;
}

@supports ((-webkit-filter: brightness(3)) or (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;
      -webkit-filter: brightness(3);
      filter: brightness(3);
   }
}

/* Horizontal mirror effect ======================================================= */
.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%;
      -webkit-transform: scaleX(-1);
      transform: scaleX(-1);
   }

   .mirror-x-effect:after {
      left: 50%;
      right: 0;
   }
}

/* Vertical mirror effect ========================================================= */
.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%;
      -webkit-transform: scaleY(-1);
      transform: scaleY(-1);
   }

   .mirror-y-effect:after {
      top: 50%;
      bottom: 0;
   }
}

/* Hide the image ================================================================= */
[class$=-effect] {
   display: inline-block !important;
   position: relative !important;
}

[class$=-effect] img {
   vertical-align: top !important;
   margin: 0 !important;
   visibility: hidden !important;
}
