【CSS】ホバー（マウスオーバー）実装サンプル集（画像の明度を上げる編）

ホバーってなんですか？

ま、マウスオーバーですねー

opacity、一択だと思っていた

画像をホバー（マウスオーバー）すると光るやつ。ほんとは半透明にしてるだけだから透過して背景次第でなんだかなということがよくあった。

filter、を使っていいと思う

IE（Internet Explorer）でfilterはNG（対応していない）。
正確には、Windows 10の標準ブラウザーであるEdgeならOK。
今後、みんなWindows 10になるのであればみんなEdgeになるわけで。
という考えであれば問題ないわけで。

▽参考
マイクロソフト、企業にInternet Explorerの使用をやめるよう要請。「IEは技術的負債もたらす」

サンプル

filterプロパティのbrightness() 関数を使う。

See the Pen
CSSだけでホバー（マウスオーバー）、画像の明度を上げる by 125naroom (@125naroom)
on CodePen.

今後はfilterのほうがいいですね

ホバーの時は、filterのほうがいいですね（個人的見解）。
IE（Internet Explorer）を除外するならおすすめです。

▽参考（filterの現状です）
Can I use

さいごに

ホバー！

ホバー！