マウスオーバーで画像をふわっとさせる
タイトルだけ見ても良くわかりませんよね。
僕自身も何が言いたいのかよく分からないので、下の画像にマウスをのっけてみてください。
マウスを乗っけるとふわっと半透明になって、マウスを外すとふわっと戻ります。
以前はJavaScriptを使っての作業でしたが、今日はでCSSで実装することが出来ます。
全てのリンク付きの画像に適応させていますが、必要があればクラスやIDを指定すると良いと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* 画像をふわっとフェードインアウト */ a:hover img { opacity: .5; -webkit-opacity: .5; -moz-opacity: .5; filter: alpha(opacity=50); /* IE lt 8 */ -ms-filter: "alpha(opacity=50)"; /* IE 8 */ } a img { -webkit-transition: opacity 1s ease-out; -moz-transition: opacity 1s ease-out; -ms-transition: opacity 1s ease-out; transition: opacity 1s ease-out; } |
圧倒的にスマホユーザーがの方が多い中、これといって必要なものではありませんが良いアクセントになるんじゃないでしょうか。
