読み込ませておけば何かと便利なJQuery。
使い勝手が良すぎてホント重宝しております。

今回はマウスオーバーでフェード効果を使うやり方。
どっかで見て習得したものの、ひさしぶりにこれをやろうと思ったら
案の定ど忘れしてたんで覚え書きとして書いておく。

まずJQueryを読み込ませておいてから、下記のスクリプトを書く。

$(document).ready(function(){
$("img.jquery-hover").fadeTo(0,1.0);
$("img.jquery-hover").hover(function(){
$(this).fadeTo(300,0.8);
},
function(){
$(this).fadeTo(300,1.0);
});
});

適当な名前でjsファイルとして保存して、またlinkタグで読み込ませよう。

ちなみにfadeTo(speed, opacity, callback)というプロパティになってます。
speed ： フェードの速度。”slow”, “normal”, “fast” の文字列か、ミリ秒を数値で指定。
opacity ： 不透明度。0 ～ 1 で指定。この不透明度になるまで、フェードします。
callback ： フェードが終了した後に実行されるコールバック関数。（オプション）
今回は不透明度を1~0.8まで300ミリ秒かけて操作するという設定です。

で、imgタグにclass名「jquery-hover」を足してやれば完成。
なんてお手軽。

pタグで囲んで背景色ひいてあげるとその色が透けます。
グラデーション画像ひいてもおもしろいかもです。

追記：
Wordpressで使用する場合、この書き方ではコンフリクトして動かないので
＄の部分をすべてjQueryで置き換えれば動作します。
wp_enqueue_scriptで読み込ませればOKです。