はじめに

マウスオーバーしたとき、画像を白黒反転させたいことがありますよね。
CSS３で追加されたプロパティ「filter」を使えば、簡単に効果を追加できますよ。

以前は、白黒2種類の画像を用意して、CSSでbackground画像に指定して、:hoverでbackground画像を入れ替えさせて…と、手間もかかるし容量も圧迫していました。

filterとは

filterはCSS3より追加されたプロパティで、関数を用いて画像などの要素にぼかしや色変化といった効果をつけます。
Photoshopのグラフィック効果をCSSでやるイメージでしょうか。
関数は10種類あり、単独はもちろん組み合わせて使うこともできます。

2024年8月26日時点では、IE11をのぞくモダンブラウザで使うことができます。
目新しいプロパティではありませんが、最近はIEを対象外とするサイトが増えてきているため、使用機会も増えているのではないでしょうか。

Source: Can I use (https://caniuse.com)」

filter関数10種については、別の記事で解説しています。気になる方はぜひご覧ください。

【CSS】filterプロパティ10種の関数の違いを解説

2024年10月18日

マウスオーバー時の白黒反転のやり方：invert関数を使う

では、さっそくやってみましょう。
画像を白黒反転させるときは、filterの関数のうち、色の階調を反転させるinvertを使います。
引数の初期値は0。数値やパーセンテージで指定し、invert(100%)またはinvert(1)で完全に反転されます。

メールアイコン画像（png）を用意しました。
こちらを:hoverで白黒反転させます。

CSS

img:hover {
filter:invert(100%);
}

結果

＼PCの方はマウスオーバー、スマホの方はタップしてみて！／

アニメーションをつけてもいいですね

CSS

img {
transition: all 0.5s ease;
}
img:hover {
filter:invert(100%);
}

結果

＼PCの方はマウスオーバー、スマホの方はタップしてみて！／

透過に注意して画像の拡張子を選ぼう

画像の作成時は、透過に注意が必要です。
今回使用しているメールアイコン画像は、pngです。
このような丸い画像の場合、jpgのような背景を透過しない拡張子だと、画像の外側が白になり、反転で黒になってしまいます。

jpgの場合

＼PCの方はマウスオーバー、スマホの方はタップしてみて！／

webpの場合

＼PCの方はマウスオーバー、スマホの方はタップしてみて！／

まとめ

hover時に画像を白黒反転させたいときは、CSSで「filter:invert(100%);」を使いましょう。
手間も容量も少なくなりますので、覚えておくと便利ですよ。
CSS、奥深いですね。

以下はおまけです

下記で、このinvert関数を使って遊んでみました。
反転の理屈がわかった気がします。

【おまけ1】invert関数をいろいろ変えてみる

白黒反転をするときはinvert(100%)ですが、ほかの数値での変化を見てみましょう。

＼PCの方はマウスオーバー、スマホの方はタップしてみて！／

invert(10%)

invert(25%)

invert(50%)

invert(60%)

invert(75%)

invert(90%)

【おまけ2】色を変えてみる

さまざまな色での変化を見てみましょう。

赤（#ff0000）と補色（#00ffff）の場合

＼PCの方はマウスオーバー、スマホの方はタップしてみて！／

invert(25%)

invert(50%)

invert(100%)

グラデーションの場合

＼PCの方はマウスオーバー、スマホの方はタップしてみて！／

invert(25%)

invert(50%)

invert(100%)

集中線の場合

＼PCの方はマウスオーバー、スマホの方はタップしてみて！／

invert(25%)

invert(50%)

invert(100%)

おまけのまとめ

いろいろ遊んでみましたが、簡単に作れるので楽しかったです。
これらの変化をうまく使えば、面白いことができそう！

様々な制作経験を生かし、あなたの良きパートナーになります。

カケルデザインは様々な業種・業界のサイト制作させていただいております。
その業務で得た経験を生かし、お客様に合わせた最良の提案・デザインを提供いたします。
お気軽にお問い合わせください。