<div class="contain">
    <p>Darken image</p>
    <div class="item example-11">
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/mountain.jpg" alt="">
        <figcaption>A random caption for this photo</figcaption>
      </figure>
    </div>
  </div>

  <div class="contain">
    <p>Lighten image</p>
    <div class="item example-11 lighten">
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/mountain.jpg" alt="">
        <figcaption>A random caption for this photo</figcaption>
      </figure>
    </div>
  </div>

  <div class="contain">
    <p>Green tint</p>
    <div class="item example-11 green-tint">
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/mountain.jpg" alt="">
        <figcaption>A random caption for this photo</figcaption>
      </figure>
    </div>
  </div>

  <div class="contain">
    <p>Using <code>mix-blend-mode</code> with <code>color</code> property</p>
    <div class="item example-11 mix-1">
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/mountain.jpg" alt="">
        <figcaption>A random caption for this photo</figcaption>
      </figure>
    </div>
  </div>

  <div class="contain">
    <p>Using <code>mix-blend-mode</code> with <code>color</code> property</p>
    <div class="item example-11 mix-2">
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/mountain.jpg" alt="">
        <figcaption>A random caption for this photo</figcaption>
      </figure>
    </div>
  </div>


  <div class="contain">
    <p>Using <code>mix-blend-mode</code> with <code>soft-light</code> property</p>
    <div class="item example-11 mix-3">
      <figure>
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/182774/mountain.jpg" alt="">
        <figcaption>A random caption for this photo</figcaption>
      </figure>
    </div>
  </div>

/*...... Demo Styles ........*/
.example-11 {
	figure {
		position: relative;
		margin: 0;
		max-width: 350px;

		&:after {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(#000, 0.35);
		}
	}

	img {
		max-width: 100%;
    display: block;
    margin-top: 0.5em;
	}

	figcaption {
		position: relative;
		z-index: 1;
		background: #fff;
	}
}

.example-11.lighten {
	figure {
		&:after {
			background: rgba(#fff, 0.35);
		}
	}
}

.example-11.green-tint {
	figure {
		&:after {
			background: rgba(#5aaf4c, 0.35);
		}
	}
}

.example-11.mix-1 {
	figure {
		&:after {
			background: rgba(#000, 1);
			mix-blend-mode: color;
		}
	}
}

.example-11.mix-2 {
	figure {
		&:after {
			background: rgba(#000, 0.5);
			mix-blend-mode: color;
		}
	}
}

.example-11.mix-3 {
	figure {
		&:after {
			background: rgba(#5f37be, 0.5);
			mix-blend-mode: soft-light;
		}
	}
}

/*...... General Styles ........*/

body {
	font-family: 'Arial';
  line-height: 1.4;
}

.contain {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	padding: 1em;
}

.off-screen {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
}

* {
	box-sizing: border-box;
}

code {
	background: rgba(lightgrey, 0.5);
	display: inline-block;
	padding: 5px;
}