なんにもない日の頭の中はこんなもんだったりする

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

  • 2019.5.30
【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

さいごに

きのこさん
ホバー!
きのこさん
ホバー!
Web design gallery - デザインのこと - ウェブデザインあつめました。
いつかのこと

おすすめ

Web design gallery - デザインのこと - ウェブデザインあつめました。

デザインの記事

女子美術大学・女子美術大学短期大学部
みんなでつくる HELLO! iDEA HELLO! New basic|studio CLIP
10月23日
とって/窓の家のかたち