画像リンクにマウスオーバーすると透明度が変化するやり方

画像リンクをリンクだとはっきりサイト訪問者にわからせる手段の一つに画像の透明度を変えるというのがあります。

通常、リンクのついた画像にマウスを乗せるとカーソルは指マークに変わります。

（※PCのみの機能）

しかしそれだけだとリンクだよということがはっきり伝わらずそのままスルーされてしまう場合もあります。

これが画像にマウスを乗せたときに指マークだけでなく、画像の透明度が変化したならどうでしょう。

指マークだけの時よりは確実に目立つでしょう。

クリックしてくれる確率も高まる（？）かもしれません。

いや、確実に高まりますよ。

そのやり方をご紹介します。

下の画像にマウスを乗せてみてください。（※PCのみ）

す～と色が薄くなりますでしょ？

（クリックしても何も起きませんよ）

やり方はこちら↓。

「テンプレート」→「スタイルシート編集」→「ユーザー指定スタイル」を開きます。

そこに以下のスタイルを加筆します。

a img:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}

これの意味は「リンクの付いた画像にマウスオンした際には透明度を10（完全不透明）から0.7（30%だけ透明になる）に変更する」というものです。

ここで終了でもいいんですが、このままだとマウスを乗せたときに一気に色が変わってしまうので、ほわ～とゆっくり透明度を変える設定もご紹介します。

やり方はこちら↓。

a img {
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}

これの意味は画像を0.2秒かけて変化させるというものです。

もっとゆっくりにしたい時は3ヵ所の0.2を全部0.5などに変えてやります。

最終的にはこんな↓感じになります。

a img {
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
a img:hover {
opacity: 0.7;
filter: alpha(opacity=70);
}

これでリンクの付いた画像すべてに設定が適用されます。