CSSでロールオーバー時に画像の透明度をふわっと変えます。

デモページへopen_in_new

HTMl

<div class="mod_Rollover002">
<p><a href="#"><img src="Rollover_002.gif" width="220" height="60" alt="ボタン" /></a></p>
<!-- mod_Rollover002_end --></div>

CSS

.mod_Rollover002 a{
	display:block;
	width:220px;
}
.mod_Rollover002 a:link    {transition: opacity 0.3s ease 0s;}
.mod_Rollover002 a:visited {}
.mod_Rollover002 a:hover   {opacity:0.8;}
.mod_Rollover002 a:active  {opacity:0.8;}
/* IE用 ↓*/
.mod_Rollover002 a:hover img {-ms-filter: "alpha( opacity=80 )";} /* IE8 */
.mod_Rollover002 a:hover img {filter:alpha(opacity=80);}/* IE6 7 */