【HTML／CSS】画像の一部分だけにモザイクをかける方法

RELEASE / 2024.8.24 UPDATE / 2024.08.22

css

テクニック

ぼかし

モザイク

一部分

CSSではぼかし（モザイク）をかけることが出来ます。
しかし、CSSでかけることが出来るぼかし（モザイク）はその画像全体に指定されてしまいます。
そこで少しCSSの指定を工夫して画像の一部分だけにぼかし（モザイク）をかける方法をご紹介したいと思います。

この記事の目次を表示

1 画像にぼかし（モザイク）をかける基本形
2 画像の一部分だけにぼかし（モザイク）をかける
- 2.1 コードの解説
3 まとめ

画像にぼかし（モザイク）をかける基本形

filter:blur()を使うことで画像にぼかし（モザイク）を書けることが出来ます。

画像にぼかし（モザイク）をかける基本的な記述方法を見てみましょう。

<figure>
    <img src="https://irodori-design-web.com/blog_image/3434/3434-1.jpg" alt="代替テキスト">
</figure>

そして以下のようにCSSの指定をすることで画像にぼかし（モザイク）をかけることが出来ます。

* {
    margin: 0;
    padding: 0;
}
figure {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(10px);
}

ぼかし（モザイク）をかけるだけであればfilter: blur(10px)のみでも大丈夫です。

実装サンプルはこちらです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

画像の一部分だけにぼかし（モザイク）をかける

さて、画像全体にぼかし（モザイク）をかける方法は色んなブログなどで紹介されていますが、画像の一部分だけにぼかし（モザイク）をかけたい場合は少し工夫が必要です。

画像の一部分だけにぼかし（モザイク）をかける場合、HTMLは以下のようにします。

<figure>
    <img src="https://irodori-design-web.com/blog_image/3434/3434-1.jpg" alt="代替テキスト">
    <img src="https://irodori-design-web.com/blog_image/3434/3434-1.jpg" alt="代替テキスト">
</figure>

そして以下のようにCSSの指定をすることで画像の一部分だけにぼかし（モザイク）をかけることが出来ます。

* {
    margin: 0;
    padding: 0;
}
figure {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
}
figure img:nth-of-type(2) {
    filter: blur(10px);
    clip-path: polygon(10% 10%, 90% 10%, 90% 90%, 10% 90%);
}

実装サンプルはこちらです。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.