Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="infra-1"></div>
<div class="infra-2"></div>
<div class="infra-3"></div>

<div class="threeed"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

@mixin fade-it($img, $shadow: #536) {
  background: url('#{$img}'), $shadow;
  background-blend-mode: lighten;
}

.apply-base {
  @include fade-it('img/ex.jpg');
}

.apply-unique-shade {
  @include fade-it('img/ex2.jpg', #293e78);
}

@mixin three-dee($img, $dist: 5px, $deg: 5deg, $width: 100%, $height: 500px) {
    z-index: 1;
    width: $width;
    height: $height;
    position: relative;
    transform: rotateY($deg);
    perspective: $width;
    background: url('#{$img}'), cyan;
    background-blend-mode: lighten;
    background-size: cover;

  &:after {
    content: '';
    position: absolute;
    display: block;
    width: $width;
    height: $height;
    z-index: 2;
    perspective: -$width;
    margin-left: $dist;
    transform: rotateY(-$deg/2);
    background: url('#{$img}'), red;
    background-blend-mode: lighten;
    background-size: cover;
    mix-blend-mode: darken;
  }
}

.cats-in-action {
  @include three-dee('img/cat.jpg', 5px, 10deg, 800px, 600px);
}

@mixin infrared($img, $deg: -60) {
    margin: 2em;
    display: block;
    width: 600px;
    height: 400px;
    position: relative;
    filter: saturate(.75);
    -webkit-filter: saturate(.75);
    background: url('#{$img}');
    background-size: cover;
  
  &:after {
    content: '';
    display: block;
    height: 400px;
    width: 600px;
    background:  url('#{$img}');
    -webkit-filter: invert(1) saturate(.75) hue-rotate(#{$deg}deg);
    filter: invert(1) saturate(.75) hue-rotate(#{$deg}deg);
    mix-blend-mode: color;
    background-size: cover;
  }
}

.infra-1 {
  @include infrared('http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg');
}


.infra-2 {
  @include infrared('https://guidetoiceland.is/image/4830/x/0/mountains-in-iceland-2.jpg', 80);
}


.infra-3 {
  @include infrared('https://trafalgarblog.files.wordpress.com/2014/09/new-hampshire-lake.jpg', 40);
}

.threeed {
  @include three-dee('http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg', 5px, 7deg, 500px, 500px);
}

SassMeister-output.css

.apply-base {
  background: url("img/ex.jpg"), #536;
  background-blend-mode: lighten;
}

.apply-unique-shade {
  background: url("img/ex2.jpg"), #293e78;
  background-blend-mode: lighten;
}

.cats-in-action {
  z-index: 1;
  width: 800px;
  height: 600px;
  position: relative;
  transform: rotateY(10deg);
  perspective: 800px;
  background: url("img/cat.jpg"), cyan;
  background-blend-mode: lighten;
  background-size: cover;
}
.cats-in-action:after {
  content: '';
  position: absolute;
  display: block;
  width: 800px;
  height: 600px;
  z-index: 2;
  perspective: -800px;
  margin-left: 5px;
  transform: rotateY(-5deg);
  background: url("img/cat.jpg"), red;
  background-blend-mode: lighten;
  background-size: cover;
  mix-blend-mode: darken;
}

.infra-1 {
  margin: 2em;
  display: block;
  width: 600px;
  height: 400px;
  position: relative;
  filter: saturate(0.75);
  -webkit-filter: saturate(0.75);
  background: url("http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg");
  background-size: cover;
}
.infra-1:after {
  content: '';
  display: block;
  height: 400px;
  width: 600px;
  background: url("http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg");
  -webkit-filter: invert(1) saturate(0.75) hue-rotate(-60deg);
  filter: invert(1) saturate(0.75) hue-rotate(-60deg);
  mix-blend-mode: color;
  background-size: cover;
}

.infra-2 {
  margin: 2em;
  display: block;
  width: 600px;
  height: 400px;
  position: relative;
  filter: saturate(0.75);
  -webkit-filter: saturate(0.75);
  background: url("https://guidetoiceland.is/image/4830/x/0/mountains-in-iceland-2.jpg");
  background-size: cover;
}
.infra-2:after {
  content: '';
  display: block;
  height: 400px;
  width: 600px;
  background: url("https://guidetoiceland.is/image/4830/x/0/mountains-in-iceland-2.jpg");
  -webkit-filter: invert(1) saturate(0.75) hue-rotate(80deg);
  filter: invert(1) saturate(0.75) hue-rotate(80deg);
  mix-blend-mode: color;
  background-size: cover;
}

.infra-3 {
  margin: 2em;
  display: block;
  width: 600px;
  height: 400px;
  position: relative;
  filter: saturate(0.75);
  -webkit-filter: saturate(0.75);
  background: url("https://trafalgarblog.files.wordpress.com/2014/09/new-hampshire-lake.jpg");
  background-size: cover;
}
.infra-3:after {
  content: '';
  display: block;
  height: 400px;
  width: 600px;
  background: url("https://trafalgarblog.files.wordpress.com/2014/09/new-hampshire-lake.jpg");
  -webkit-filter: invert(1) saturate(0.75) hue-rotate(40deg);
  filter: invert(1) saturate(0.75) hue-rotate(40deg);
  mix-blend-mode: color;
  background-size: cover;
}

.threeed {
  z-index: 1;
  width: 500px;
  height: 500px;
  position: relative;
  transform: rotateY(7deg);
  perspective: 500px;
  background: url("http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg"), cyan;
  background-blend-mode: lighten;
  background-size: cover;
}
.threeed:after {
  content: '';
  position: absolute;
  display: block;
  width: 500px;
  height: 500px;
  z-index: 2;
  perspective: -500px;
  margin-left: 5px;
  transform: rotateY(-3.5deg);
  background: url("http://una.im/images/posts/blend-modes/tahoe-prefilter.jpg"), red;
  background-blend-mode: lighten;
  background-size: cover;
  mix-blend-mode: darken;
}

SassMeister-rendered.html

<div class="infra-1"></div>
<div class="infra-2"></div>
<div class="infra-3"></div>

<div class="threeed"></div>