画像にグラデーションのフィルターをかける

Result

See the Pen <a href='https://codepen.io/kachibito/pen/xpGawM/'>Gradient filtering images</a> by kachibito (<a href='https://codepen.io/kachibito'>@kachibito</a>) on <a href='https://codepen.io'>CodePen</a>.<br />

css

img {/*filterはあってもなくても大丈夫だけどよりグラデーションを引き立てるならグレースケールに*/
  max-width: 100%;
  vertical-align: middle;
  filter: grayscale(100%) contrast(0.9);
}
 
 
.item {
  position: relative;
  margin-bottom: 25px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
}
 
.item:after {/*基本的に画像に疑似要素は付けられないので包括するボックスに加える。*/
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.55; /*下に配置する画像が見えるよう、疑似要素は透過しておく*/
}
 
.item--first:after {/*グラデーションを作成して画像の上に配置*/
  background-image: linear-gradient(45deg, #1199c4, #B10DC9);
}
 
.item--second:after {
  background-image: linear-gradient(80deg, orange, #810000);
  opacity: 0.55;
}
 
.item--third:after {
  background-image: linear-gradient(180deg, #28d6e4, #04f44f);
  opacity: 0.4;
}
 
.item--fourth:after {
  background-image: linear-gradient(45deg, #00009a, #b300b3);
  opacity: 0.425;
}
 
 
 
.item--sixth:after {
  background-image: linear-gradient(315deg, #e6ed53, #43c4ed);
  opacity: 0.45;
}
 
.item--seventh:after {
  background-image: linear-gradient(325deg, #1cbaeb 7%, #ff0000 90%);
  opacity: 0.475;
}
 
.item--eighth:after {
  background-image: linear-gradient(225deg, forestgreen 7%, orange);
  opacity: 0.5;
}
 
/* currently unused */
.item--ninth:after {
  background-image: linear-gradient(75deg, #fb4530, #f92ff1);
}
 
.item--tenth:after {
  background-image: linear-gradient(135deg, #f3ef12, #dc16a6);
}
 
.item--eleventh:after {
  background-image: linear-gradient(270deg, #3101ee, #f90e49);
  opacity: 0.45;
}
 
.item--twelth:after {
  background-image: linear-gradient(270deg, #f59aa5, #48317f);
  opacity: 0.6;
}

html

<div class="item item--first">
  <img src="foo.jpg" />
</div>

off topic

空要素であるimgタグに疑似要素は×だけど、URLが無ければ加えられるみたいです

Opera最新でしか見てません。
これが仕様なのかバグなのかまでは調査してません。
いずれにしても画像に疑似要素は不可が基本としておいたほうが良いですね。

via

Gradient filtering images

Result

css

html

off topic

via

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code