CSS | filterで画像を暗く表示する方法
CSSでfilterプロパティを利用して画像・写真を暗く加工した状態で表示する方法のサンプル集です。
「暗くする」という見出しですが、シンプルに暗転できるbrightness（明度）から、暗くするとは意味合いが少し違ってきますがgrayscale（グレースケール）、sepia（セピア調）、saturate（彩度）、contrast（コントラスト）なんかも紹介しています。
See the Pen CSS | Prevent the image from sticking out by yochans (@yochans) on CodePen.
上記動作サンプルではマウスホバー時にフィルターがかかっていないデフォルトの状態を表示するようにしています。
brightness（明度）
一番、暗くするという表現に近いフィルター。
0～1までの値が指定可能で、0が一番暗く（黒）、1がフルターを通していないデフォルトの状態になります。
.brightness{
filter: brightness(0.3);
}grayscale（グレースケール）
HTML要素や画像・写真をグレースケール調にフィルターします。
0～1までの値が指定可能で、0がフルターを通していないデフォルトの状態で、1が最もグレースケールが掛かった状態になります。
.grayscale{
filter: grayscale(0.9);
}sepia（セピア調）
sepiaはHTML要素や写真をセピア調にフィルターします。
0～1までの値が指定可能で、0がフルターを通していないデフォルトの状態で、1が最もセピア調な状態になります。
.sepia{
filter: sepia(1);
}saturate（彩度）
saturateはHTML要素や写真の彩度を調節しフィルターします。
0～の値が指定可能で、0が最も彩度が低い状態で、1ががフルターを通していないデフォルトの状態、1以上の数値にて彩度を上げていく事が可能です。
.saturate{
filter: saturate(0);
}contrast（コントラスト）
contrastはHTML要素や写真のコントラストを調節しフィルターします。
0～の値が指定可能で、0がコントラストが最も低い灰色の状態、1ががフルターを通していない状態で、1以上の数値にてコントラスト値を上げていく事が可能です。
.contrast{
filter: contrast(0.5);
}