.l--wrapper  
  ul
    each val in ['overlay',   'color-dodge', 'color-burn', 'hard-light', 'soft-light',  'hue', 'saturation', 'color', 'luminosity', 'normal']
      li(class='item')
        -var demoClass = 'demo demo--' + val;
        div(class=demoClass, data-mode=val)
        
// 'multiply', 'screen',  'darken', 'lighten', 'difference', 'exclusion',
View Compiled
$width: 250;
$height: 202;
$img: "http://placekitten.com/#{$width}/#{$height}";

@mixin modes {
  $bl-modes: multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity;

@each $mode in $bl-modes {
  .demo--#{$mode},
  .demo--#{$mode}:before{
    background-blend-mode: $mode;
    }
  }
}

BODY {
  padding-top: 1em;
  text-align: center;
  font: 16px/1.4 Arial, sans-serif;
  }

.l--wrapper {
  position: relative;
  min-width: 500px;
  max-width: 1000px;
  margin: 1em auto;
  padding: 1em;
  }

.item {
  display: inline-block;
  width: #{$width*2}px;
  text-align: left;
  }
.demo {
  display: inline-block;
  position: relative;
  width: #{$width}px;
  height: #{$height}px;
  margin: 0;
  text-align: left;
  
  &:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    bottom: 0;
    width: 100%;
    transition: all .5s;
    }
  
  &:after {
    content: attr(data-mode);
    display: block;
    position: absolute;
    top: .5em;
    left: .5em;
    padding: .3em .7em;
    background: rgba(255,255,255,.5);
    text-shadow: 0 1px 1px #FFF;
    }
  
  
  }


.demo:hover:before {
  opacity: 1;
  }

.demo, .demo:before {
  position: relative;
  height: 200px;
  margin-bottom: 2em;
  }
$color: dodgerblue;
.demo {
  background: url($img),
    linear-gradient($color,$color);
  } 
.demo:before {
  background: linear-gradient($color,$color),
    url($img);
  
  }

@include modes;


View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.