<img src="/images/cp_300.png" title="both" class="both">
<img src="/images/cp_ico.png" title="original">
<img src="/images/cp_300.png" title="saturate" class="saturate">
<img src="/images/cp_300.png" title="grayscale" class="grayscale">
<img src="/images/cp_ico.png" title="contrast" class="contrast">
<img src="/images/cp_ico.png" title="brightness" class="brightness">
<img src="/images/cp_300.png" title="blur" class="blur">
<img src="/images/cp_ico.png" title="invert" class="invert">
<img src="/images/cp_300.png" title="sepia" class="sepia">
<img src="/images/cp_ico.png" title="huerotate" class="huerotate">
body {
    background-color:#03030a;
}

img {
 width:20%;
 float:left; 
 margin:0;
}

/*Filter styles*/
.both {-webkit-filter: hue-rotate(4deg) saturate(2);}
.saturate {-webkit-filter: saturate(2);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.20);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}