[CSS3] Image Grayscale

CSS로 이미지를 그레이스케일로 변환

img {
    /* Firefox 10+, Firefox on Android */
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><fecolormatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'></fecolormatrix></filter></svg>#grayscale");

    /* IE6-9 */
    filter: gray;

    /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    -webkit-filter: grayscale(100%);

    /* Disable */
    &:hover {
        filter: none;
        -webkit-filter: grayscale(0%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }
}