マウスホバー時の画像変更は、通常ロールオーバー用の画像を用意するのですが、面倒な時やブログなどで頻繁に使うときは、CSSだけでhover時に画像を半透明にさせる方法もあります。

まずは、CSSのどこかに以下の記述を忍ばせます（不透明度60%）。

a img.linkimg{
background:none!important;
}

a:hover img.linkimg{
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
background:none!important;
}

あとは、使いたい箇所に以下のようにマークアップすればOKです。

<a href="#"><img src="画像絶対パス" class="linkimg" /></a>

このようにマウスを移動させると半透明になります。

不透明度を変えたい場合は、0.6とか60とかの数字を変えてください。

例えば、50%だとこのようになります。

a img.linkimg{
background:none!important;
}

a:hover img.linkimg{
opacity:0.5;
filter:alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";
background:none!important;
}

よろしければお試しください。

WordPressテーマを無料プレゼント