CSSのfilterプロパティを使用すると、JavaScriptや画像編集ソフトを使わずに、画像の色を反転させることができます。
これを活用すれば、たとえばボタンやリンクのホバー時に画像を切り替える手間を省き、より効率的にデザイン＆コーディングすることが可能です。

完全にモノクロの画像を用意するなど、いくつか条件がありますが、非常に便利です。

前提条件

この方法を適用する際には、以下のポイントを満たしている必要があります。

  1. PNG画像の背景を透過させておくこと」
    画像が背景透過でない場合、背景部分も一緒に反転されてしまいます。
  2. 画像に使用されている色は白または黒一色にする：
    画像内に別の色が含まれていると、反転後の見た目がおかしくなる。この方法は、白または黒を基調としたシンプルな画像に最適です。
  3. インタラクションに適したデザインであること：
    たとえばボタンやリンクのホバー時に反転効果を適用する場合、ユーザーに違和感を与えないシンプルなUI設計が求められます。

filterプロパティを使って色を反転させる

CSSのfilter:invert(100%)プロパティを使用して、画像の色を反転させます。
具体的には、黒い部分は白に、白い部分は黒に変わります。

img {
	filter: invert(100%);
}

たったこれだけで、対象の画像の色が常時反転されます。さらに、ホバー時にのみ反転させたい場合は以下のように設定します。

ホバー時の反転効果を追加

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

ホバー時にのみ反転効果を適用する場合は、:hover疑似クラスを使用します。
この方法を使えば、ホバー時に画像を動的に反転させる効果を簡単に実現できます。

利用時の注意点

  1. 複雑なカラー画像には不向き
  2. 背景が透明でない場合、背景部分も反転されるため、あらかじめ透明にしておく必要がある
  3. フィルター効果はブラウザでリアルタイムに処理されるため、大量の画像に適用するとパフォーマンスに影響が出る。必要最低限の要素にのみ使用すること

特に、シンプルな白黒デザインのアイコンやロゴに適しており、transitionを併用することでスムーズなアニメーション効果を付与することも可能です。
ぜひお試しください。