今回はちょいとしたメモ書きです。
サイト上に画像を配置し、リンク先を設定するようなことは多いと思います。
そんな時、ロールオーバー(ホバー)効果といってマウス(カーソル)を画像の上に持っていくだけで画像に変化があると、ユーザーさんにリンク先がある画像だと認識させやすくなります。
もちろん、画像ごとにCSSを設定することが望ましいのですが、正直面倒な作業でもあります。
そこで、手抜き方法のご紹介。
やり方は簡単。サイトの共有CSSファイルのどこかに以下のソースを記述してください。
a:hover img{ opacity:0.8; filter:alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; }
すると、特にCSS指定されていない画像で、リンク設定がある場合に少し画像が明るくなります。
これは透過処理して、明るく見せているのです。
ちなみに80の数字を少なくすると明るさは増します。(薄くなります)
とっても簡単で、意外と便利なので覚えておいて損はないと思います。
ではでは。
シェアクリックをお願いします。
FacebookでシェアするTwitterでつぶやくはてなブックマーク!
この記事は参考になりましたか?
この記事に対しての評価をお願いします。
※5段階の簡単評価です。★をクリックすることで誰でも簡単に評価できますので「ポチっとな」をお気軽にお願いします。