CSSの画像エフェクト

photoshopとかで乗算とかの効果が入っててふざけんなと思うこと、フロントエンドならあるあるですよね。
そのイライラ、解決されます。そう、IE以外のモダンブラウザならね

サンプル(hoverで効果かかります)

mix-blend-mode

cssにはmix-blend-modeとかいうプロパティがあります。
持てる値としてはnormal,multiply,screen…めんどくさいのでggr
とりあえずサンプル用意しました。

コード

必要な部分はこんな感じ

html
<div class="item"><img src="hoge"></div>

.item {
  display: inline-block;
  position: relative;
}
.item:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: overlay;
  background: radial-gradient(200px circle at 30% 10%, orange, rgba(255,255,255,0)),
              radial-gradient(300px circle at 80% 60%, red, rgba(255,255,255,0));

}
.item img {
  width: 100%;
}

画像同士を混ぜたりとか色味変えたりとかテキストに使ったり可能性は無限大！
個人的にはgifアニと混ぜるとかが好きだけどサンプルにはライセンスとかの問題で拾ったののっけにくいから個人で試してくださいな
IEでは動きません。IEでは動きません。
どうでもいいことですが２回言っときました。