CSSを使ってマウスオーバーした時に画像をゆっくりとフェードイン・アウトさせる方法

ゆっくりとフェードインするボタン

ボタンにマウスを重ねると画像が変わったり、色が変わったりするマウスオーバー（ロールオーバー）アクション。パッと変わるのが普通に良くあるパターンですが、少し時間をかけてゆっくり薄くなるのも気持ちが良いものです。
CSSを使ってマウスオーバーした際にゆっくりと色が薄くなっていく効果を付けます。

基本的な書き方

HTMLとCSSの基本的な書き方は以下の通り。
この様に記載すれば、マウスオーバーした際に画像がゆっくりと透過になっていきます。

<a href="リンク先のURL"><img src="ボタンに使いたい画像のパス" ></a>

a:hover img {
 opacity: 0.5;
}
 
a img {
 transition: opacity 0.3s ease-out;
}

CSSの解説

hoverに記載している「opacity」は要素を透過度を指定できるプロパティです。
「transition」は時間的変化をまとめてしている際に使用します。
「0.3s」というのは0.5透過されるまでの時間（1秒なら1s）を表し、
「ease-out」はイージングの効果であり、ease-outは「ゆっくり終わる」という意味になります。

opacity: 0.5;

0.5（1が100％表示）透過してね。とう意味になり、

transition: opacity 0.3s ease-out;

時間的変化をまとめます：0.5透過　300ミリ秒で　ゆっくり戻してね
とう意味になります。

これで完成です！
と言いたい所ですが、このままでは各ブラウザでの動作が危ういので「ベンダープレフィックス」を付けて対応します。

ベンダープレフィックスを追加して完成

以下がベンダープレフィックスを追加して完成させたCSSとなります。

a:hover img {
　-webkit-opacity: 0.5;
　-moz-opacity: 0.5;
　-o-opacity: 0.5;
　filter: alpha(opacity=50);	/* IE lt 8 */
　-ms-filter: "alpha(opacity=50)"; /* IE 8 */
　opacity: 0.5;
}
 
a img {
　-webkit-transition: opacity 0.3s ease-out;
　-moz-transition: opacity 0.3s ease-out;
　-ms-transition: opacity 0.3s ease-out;
　-o-transition: opacity 0.3s ease-out;
　transition: opacity 0.3s ease-out;
}

マウスオーバーアクションの時間を遅延させ動作をズラす（番外編）

以下の様にイージングの後に時間設定を入れる事で、「マウスオーバーした何秒後にアクションが始まる」という設定もできます。

transition: opacity 0.3s ease-out　0.5s;

時間的変化をまとめます：透過　300ミリ秒で　ゆっくり戻してね マウスオーバーしてから500ミリ秒後に透過を開始してね
とう意味になります。