css-filter

HTML

<style>
    .grayscale{
      -webkit-filter: grayscale(100%);
      filter:  grayscale(100%);
     }
.opacity{
 -webkit-filter: opacity(.5);
}
</style>
<dl>
    
    <dt>Brightness</dt>
        <dd><img src='http://farm8.staticflickr.com/7083/7336024530_7229d41d49.jpg' class='brightness'></dd>
      
</dl>

SCSS

dl{
  width: 526px;
}

dt{
  margin: 10px 5px;
  padding: 3px 5px;
  background-color: #ddd;
  border-radius: .2em;
  border: 1px solid #d0d0d0;
  box-shadow: 0 1px 0 0 rgba(255,255,255,.5) inset;
}

dd {
  height: 333px;
  margin: 0 5px 20px;
  border: 8px solid rgba(0,0,0,.2);
  border-radius: .2em;
  text-align: center;
}


$vendor: -webkit- -moz- -o- -ms- '';
.blur{  
    @each $prefix in $vendor {  
        #{$prefix}filter:blur(3px); 
    }
}

.brightness{  
    @each $prefix in $vendor {  
        #{$prefix}filter:brightness(100%); 
    }
}

.saturate{  
    @each $prefix in $vendor {  
        #{$prefix}filter:saturate(20);
    }
}

.hue_rotate{  
    @each $prefix in $vendor {  
        #{$prefix}filter:hue-rotate(80deg);
    }
}

.contrast{  
    @each $prefix in $vendor {  
        #{$prefix}filter:contrast(300%);
    }
}

.invert{  
    @each $prefix in $vendor {  
        #{$prefix}filter:invert(100%);
    }
}

.sepia {
    @each $prefix in $vendor {  
        #{$prefix}filter:sepia(100%);
    }
}

.dropshadow {
    @each $prefix in $vendor {  
        #{$prefix}filter:drop-shadow(10px 10px 5px black);
    }
}