Warning: Trying to access array offset on value of type bool in /home/yotigory/codingmania.net/public_html/wp-content/plugins/search-everything/config.php on line 29
CSSでロールオーバー時に画像の透明度をふわっと変えます。 - CodingMania

2011/3/13

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

CSSのopacityで、画像の透明度を変更します。

transition: opacity 0.3s ease 0s;でフワッとを指定をしています。

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 */