Generated by SassMeister.com.

SassMeister-input-HTML.html

<style>
  .mountain {
    background-image: url('http://sassbreak.com/assets/mountains.jpg');
  }
  
</style>
<div class="item">
  <div class="mountain blend">
    
  </div>
  <span class="title">Event</span>
</div>

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----


/* Mixin Blendy

Example mixin using css blend mode

Testing and playng blend modes withis this Pen from Adobe :
<http://codepen.io/adobe/pen/FeiCp>

Css blend mode on CSSTricks:
<http://css-tricks.com/basics-css-blend-modes/>

Sizing the background image to fit and fill the container:
<http://www.w3schools.com/cssref/css3_pr_background-size.asp>


@see          - Specification <http://dev.w3.org/fxtf/compositing-1/>
@source       - <http://sassbreak.com/css-blend-modes-with-sass/>
@param $img   - Base background image
@param $color - (null !default) Fill with a color
@param $grad  - (null !default) Fill with a gradient 
@param $blend - (multiply !default) 
@usage        - 

Styleguide libs.mixins.blendy
*/


//Blend mode gradients --------------------------
 $cool-grad: linear-gradient(aqua, royalblue);
 $meh-grad: linear-gradient(tomato, transparent);
 $snarky-grad: linear-gradient(orange 75%, blue);



@mixin blendy($img, $color: null, $grad: null, $blend: multiply) {
  $img-path: url('#{$img}');
  @if $grad {
    background: $grad;
  } @else {
    //background-image: $img-path;
    background-color: $color;
  }
  background-blend-mode: $blend;
}


// Usage example
.blend {
  @include blendy("http://sassbreak.com/assets/mountains.jpg",$grad: $cool-grad);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-size: cover; 
  margin: 1.5em auto;
}
.item {
  width:250px;
  margin:0 auto;
  position:relative;
  z-index:1;
  &:hover {
    .blend{
    background-color:lighten(blue,75);
    }
    .title{
      display:block;
      background:rgba(255,255,255,.2);
      color:black;
      
    }
  }
}
.item .title {
  display:block;
  position: absolute;
  background: transparent;
  z-index:3;
  width: 100%;
  padding: .5em 0em;
  top:35%;

  font-size:2em;
  text-align:center;
  color:white;
  
  border-top:1px solid white;
  border-bottom:1px solid white;
  -webkit-transition: background 2s;
  transition: background 2s;
}

SassMeister-output.css

/* Mixin Blendy

Example mixin using css blend mode

Testing and playng blend modes withis this Pen from Adobe :
<http://codepen.io/adobe/pen/FeiCp>

Css blend mode on CSSTricks:
<http://css-tricks.com/basics-css-blend-modes/>

Sizing the background image to fit and fill the container:
<http://www.w3schools.com/cssref/css3_pr_background-size.asp>


@see          - Specification <http://dev.w3.org/fxtf/compositing-1/>
@source       - <http://sassbreak.com/css-blend-modes-with-sass/>
@param $img   - Base background image
@param $color - (null !default) Fill with a color
@param $grad  - (null !default) Fill with a gradient 
@param $blend - (multiply !default) 
@usage        - 

Styleguide libs.mixins.blendy
*/
.blend {
  background: linear-gradient(aqua, royalblue);
  background-blend-mode: multiply;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-size: cover;
  margin: 1.5em auto; }

.item {
  width: 250px;
  margin: 0 auto;
  position: relative;
  z-index: 1; }
  .item:hover .blend {
    background-color: white; }
  .item:hover .title {
    display: block;
    background: rgba(255, 255, 255, 0.2);
    color: black; }

.item .title {
  display: block;
  position: absolute;
  background: transparent;
  z-index: 3;
  width: 100%;
  padding: .5em 0em;
  top: 35%;
  font-size: 2em;
  text-align: center;
  color: white;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  -webkit-transition: background 2s;
  transition: background 2s; }

SassMeister-rendered.html

<style>
  .mountain {
    background-image: url('http://sassbreak.com/assets/mountains.jpg');
  }
  
</style>
<div class="item">
  <div class="mountain blend">
    
  </div>
  <span class="title">Event</span>
</div>