Webサイト制作で必ず出てくるのが
「メニュー部分のロールオーバー」「バナーのロールオーバー」などなど。
テキストで作っているか、画像で作るのかでその都度
CSSで設定したりJavascriptを使ったりしますが、
今回は「ロールオーバー時に画像を薄くみせる」だけの簡単な方法。

要は、アルファ値（不透明度）を設定しているだけですが、

    a:hover img{
    opacity:0.8;
    filter:alpha(opacity=80);
    -ms-filter: "alpha( opacity=80 )";
    }

この設定をCSSに追加してみます。
0.8や80という数値はアルファ値（不透明度）を「８０％」に設定しているので
この部分は７０％でも６０％でもお好みで。

このままだとサイト全体のリンクの貼られた画像は全て影響してしまうので、
他の設定を反映させたい場合は、

    a:hover
    img.hoverImg { ...

などとclass設定を追加して、反映させたい画像のclassに

class=”hoverImg”　を追加してみましょう。