【css】マウスオーバーで画像を白っぽく【簡単コピペ】

画像は今回使用したものです。

分かる人がいるのかなぁ？　HONDA NSRをコントロールするミック・ドゥーハンです。

懐かしいですねぇ…ライディングフォームとか、今のGPと比べるとクラシカルに見えたりするから不思議です。

さて。

WGPの昔語りはこれぐらいにしておいて、今回はCSSを使ってのマウスオーバー系処理です。

よく、画像（画像ボタンみたいにリンクになっているもの）にマウスオーバーした際、UI/UX的に画像を白っぽくし「ここクリックできそう」とユーザーに認識させることってあったりすると思います。

その際、元画像を元に白っぽく加工した画像を作成して、マウスオーバー時に画像を切り替える処理をしますよね？

もちろん、その方法でも問題はないと思うのですが、例えばトップページに大量の写真（ギャラリー的）なものがあった場合に、いちいちそれ用のマウスオーバー画像を用意するのも手間がかかってしまって非効率化じゃありませんか？

そこで、CSSを使ってマウスオーバー時に写真に一時的な加工をしてしまいましょう～っていいのが今回の狙い。

ざっとhtmlを記述

単純化する意味でも、画像を表示するだけのhtmlを書いてみたいと思います。

画像はみなさん自分のお好みのモノをご使用くださいませ。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>css mouse over</title>
 <style></style>
</head>
<body>
 <img src="mic.png" alt="WGP">
</body>
</html>

こんな感じでしょうか。

cssはopacityとfilterを使用

写真加工といっても、表示している画像を白っぽくする処理をcssで書いてあげるだけなんですが、どうするとそれっぽく見えるのかを考えてみたところ、

opacity
filter: brightness

このふたつで書いてあげるのが一番簡単かなと。

opactiyは画像や色の透明度を指示することができます。画像を白っぽくする際、色の濃さが微妙に感じたので透明度を変更して少し透かすようなイメージにしてみました。

filterは画像の表示表現で重宝します。今回はブライトネスを変更して白っぽくする処理をしています。

具体的な記述例は

img:hover { opacity: 0.6; filter: brightness(110%); }

imgタグにマウスなどがhover（重なった時）に、透明度とブライトネスを変更、という感じですね。

実際に比べるとこれぐらいの差になってます。

数値の調整は好みがあるとは思うので各自でいじってみてくださいね。

さて、これで一応目標は達成できているのですが、せっかくなので白っぽくなる処理をゆっくりにしてみましょう。

cssのtransitionを追加してちょっとリッチに

今のままだと、色の切り替えがスイッチのオンオフみたいにパチパチとしてしまうので、これをアニメーションっぽくゆっくり白くなるように改良してみましょう。

使うのは

transition

です。これは時間的変化を指定することができるもので、今回の狙いはマウスオーバーしたら白っぽくなるまでコンマ数秒時間をかけて変化するようにしてあげたいと思います。

書き方は簡単

img { -webkit-transition: all .3s; transition: all .3s;}

webkitも書いてあるのは念のため。「all .3s」の詳しい説明は割愛いたしますが「imgタグに起こる変化はコンマ3秒の時間をかけて処理してね」というイメージになります。

これを実装すると…静止画ではうまく見せることができなくて残念なのですが、ジワッと画像が白くなるようになります。

ちょっぴりリッチな感じでしょ？ｗ

まとめ

今回はマウスオーバー系での画像処理について紹介してみました。

その昔、ガラケーサイトの作成などで細かい画像を用意し、ついでにPC用の画像にマウスオーバー時の処理をしたものを作成していたなんて事もあったり。

もう、フォトショップと一日中向き合って仕事する、なんてこともやってましたね。

それから考えると、今回のような処理ができるようになっているのは色々な意味で手間が軽減されていいですよね…ええ、あの時代にあって欲しかったｗ

何かの参考になれば幸いです！

最後にいつも通り、コードをば。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>css mouse over</title>
 <style>
 img   { -webkit-transition: all .3s; transition: all .3s;}
 img:hover { opacity: 0.6;  filter: brightness(110%); }
 </style>
</head>
<body>
 <img src="mic.png" alt="WGP">
</body>
</html>