画像リンクにマウスオーバーで半透明

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>画像リンクにマウスオーバーで半透明</title>
</head>
<body>
<h1>画像リンクにマウスオーバーで半透明</h1>
<style type="text/css">
a.opa75 img:hover
{
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}
a.opa50 img:hover
{
filter:alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
}
a.opa25 img:hover
{
filter:alpha(opacity=25);
-moz-opacity:0.25;
opacity:0.25;
}
</style>
<div>
<h2>不透明度75%</h2>
<a class="opa75" href="#"><img src="images/catnapsample.gif" /></a>
<h2>不透明度50%</h2>
<a class="opa50" href="#"><img src="images/catnapsample.gif" /></a>
<h2>不透明度25%</h2>
<a class="opa25" href="#"><img src="images/catnapsample.gif" /></a>
</div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>