CSSだけでドットフィルターをかける

動画の長さは短くしたくない！でも粗い画像は見栄えが悪いからやだ！というご要望。
ドットフィルターをかけて視覚的に粗さを隠すことで無事に納品できたので備忘。

DEMO

擬似要素::afterでドットフィルターをかける

html

画像の場合

<div class="dot_wrap">
  <img src="image.jpg" alt="画像">
</div>

動画の場合

<div class="dot_wrap">
  <video autoplay muted loop>
    <source src="video.mp4" type="video/mp4">
      お使いのブラウザは動画再生に対応していません。
  </video>
</div>

CSS

.dot_wrap {
  position: relative;
  display: inline-block;
}
.dot_wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4); //ドットの背景色を半透明の白色に
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 20%, transparent 21%);
  background-size: 3px 3px; //ドットの繰り返しサイズを3px x 3pxに
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}
.dot_wrap img {
  display: block;
  position: relative;
  z-index: 0;
}

⚠️【WordPress】.wp-block-image:after の影響で擬似要素が効かないときの対処法

WordPressのテーマによっては、以下のようなCSSが最初から定義されていることがある。

.wp-block-image:after {
    clear: both;
    content: "";
    display: block;
    height: 0;
    visibility: hidden;
}

これは、<figure class="wp-block-image"> などの画像ブロックに対して clearfix を実現するための記述。
しかし、この :after が定義されているのが原因で、前述の方法ではドットフィルターが表示されない。

対処法 1 : テーマの影響を打ち消す

height や visibility を明示的に指定することで、テーマの影響を打ち消して ::after が表示されるようにする。

.wp-block-image.dot_wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4); //ドットの背景色を半透明の白色に
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 20%, transparent 21%);
  background-size: 3px 3px; //ドットの繰り返しサイズを3px x 3pxに
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
  height: 100%;           /* ← ここで上書き */
  visibility: visible;    /* ← ここで上書き */
}
.dot_wrap img {
  display: block;
  position: relative;
  z-index: 0;
}

対処法 2 : カスタムHTMLで明示的なフィルター用要素を入れる

もし擬似要素がどうしても競合してしまう場合、HTMLに明示的に要素を追加するのが手っ取り早いかも。

HTML

カスタムHTMLで下記の構成を記載する。

<div class="wp-block-image dot_wrap"> <!-- ← dot_wrapクラスを追加 -->
  <figure class="alignleft size-full">
    <img src="画像URL" alt="">
    <div class="dot_overlay"></div> <!-- ← 追加 -->
  </figure>
</div>

CSS

.dot_wrap {
  position: relative;
  display: inline-block;
}
.dot_overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.4);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 20%, transparent 21%);
  background-size: 3px 3px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}
.dot_wrap img {
  display: block;
  position: relative;
  z-index: 0;
}