CSS を使用したマウスオーバー時の色の復元によるグレースケール

マウスオーバー時の色の復元によるグレースケールの外観は、さまざまな方法で実現できます。 、IE と Firefox の両方でブラウザ間の互換性を提供します。

方法 1: 純粋な CSS (単色の画像を使用する)

この手法では、ベンダー プレフィックスを含むフィルター プロパティを利用して、サポートされているすべてのブラウザーで画像をグレースケールします。

img.grayscale {
  filter: url("data:image/svg xml;utf8, ..."); /* Firefox 3.5  */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19 , Safari 6  */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}

方法 2: 純粋な CSS (2 つの画像を使用)

もう 1 つのアプローチでは、グレースケール バージョンとカラー バージョンの 2 つの画像を使用します。最初はグレースケール画像が表示され、ホバー状態はカラー画像に移行します。

img {
  transition: all .6s ease;
}

img:hover {
  opacity: 0;
}

.grayscale {
  opacity: 1;
}

方法 3: CSS フィルターを使用した SVG

IE10 および最新のブラウザーの場合、インライン SVG はフィルタを適用するために使用され、グレースケール効果を動的に制御できるようになります:

svg image {
  transition: all .6s ease;
}

svg image:hover {
  opacity: 0;
}