<div class="grid">
  <div class="item multiply">
    <img src="https://s3-storage.textopus.nl/wp-content/uploads/2017/02/17174652/apple-park-bomen.jpg" alt="">
  </div>
  <div class="item lighten">
    <img src="https://s3-storage.textopus.nl/wp-content/uploads/2017/02/17174652/apple-park-bomen.jpg" alt="">
  </div>
  <div class="item difference">
    <img src="https://s3-storage.textopus.nl/wp-content/uploads/2017/02/17174652/apple-park-bomen.jpg" alt="">
  </div>
  <div class="item darken">
    <img src="https://s3-storage.textopus.nl/wp-content/uploads/2017/02/17174652/apple-park-bomen.jpg" alt="">
  </div>
  <div class="item color-dodge">
    <img src="https://s3-storage.textopus.nl/wp-content/uploads/2017/02/17174652/apple-park-bomen.jpg" alt="">
  </div>
  <div class="item luminosity">
    <img src="https://s3-storage.textopus.nl/wp-content/uploads/2017/02/17174652/apple-park-bomen.jpg" alt="">
  </div>
</div>
.multiply {
  mix-blend-mode: multiply;
}

.lighten {
  mix-blend-mode: lighten;
}

.difference {
  mix-blend-mode: difference;
}

.darken {
  mix-blend-mode: darken;
}

.color-dodge {
  mix-blend-mode: exclusion;
}

.luminosity {
  background-color: #ffffff;
  mix-blend-mode: luminosity;
}

body {
  margin: 0;
}

.grid {
  display: grid;
  height: 100vh;
  grid-template-columns: 1fr 1fr 1fr;
  background-color: purple;
}

.item {
  height: 50vh;
}

.item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.