画像にマウスをのせて白っぽくする。CSSだけで実装する方法

よく使われるデザインで画像の上にマウスを乗せると白っぽくなるデザインってよくありますよね。

これを実装するにはCSSのコードを編集して実装するわけですが、色々な方法で実装することは可能です。

今回、アニメーションなどは実装せずにシンプルに画像を白っぽくするだけの方法を紹介します。

CSSだけで画像を白っぽくする

方法と言っても、とても簡単です。下記のコードをCSSファイルに書き加えるだけです。

img:hover{ 
    opacity:0.8;
}

img:hoverはimgタグの上にマウスが乗った時の挙動を表します。

opacityは透過度を表しています。

上記のコードだと全てのimgタグに反映されてしまうので、クラス名を付けたもので対応するのがベターです。