マウスオーバーで画像を半透明にする方法

リンクがはられている箇所にマウスを合わせるとカーソルが指マークに変わったりしますよね。それ以外にも、CSSを使って、テキストリンクなら文字色を変えたり下線を引いたり、ボタンなら背景色を変えたりして、より視覚的にリンクであることを認識させることができます。
もちろん、画像でも背景画像にして切り替えたり、Javascriptなどを使ってロールオーバーさせたりすることはできますが、いちいちマウスオーバー時の画像を用意するのも面倒だったりします。
そこで、画像リンクでもマウスオーバー時の画像を使わずに、簡単に視覚的にリンクであることを分かりやすくする表現方法を紹介します。

マウスオーバー時の画像の見せ方

手軽に画像のマウスオーバー時の動きをつけるには、「opacity」というプロパティを使うことで実現できます。opacityプロパティは、不透明度を指定する際に使用されるものです。

a img:hover {
  opacity: 0.7;
}

これで、リンクがはられた画像にマウスを合わせたときに画像が半透明になり、より視覚的に画像リンクであることが認識されやすくなったりします。opacityの値はお好みで設定してください。