★ リンクされた画像にカーソルを乗せると、画像が半透明になる方法
例
● ＣＳＳへ追記（透過度 50%の例)
a:hover img{
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
filter: alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
● 下記のスクリプトでもできます。
（フリープラグインへ追記）
<script type="text/javascript">
$(function(){
$("a:has(img)").hover(function(){$(this).fadeTo(75,0.5);},function(){$(this).fadeTo(75,1)})
}</script>
$(function(){
$("a:has(img)").hover(function(){$(this).fadeTo(75,0.5);},function(){$(this).fadeTo(75,1)})
}</script>
◆ 75 はミリ秒です。1000が１秒になります。
fadeTo(75,0.5) の 0.5 が透過度です。0.5は50%の透過度です。
★ その他
◆ リンクにカーソルを乗せたら、リンク部分を半透明
a:hover{/* リンクを触ったらリンクをを半透明 */
-moz-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}
-moz-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}
◆ 記事にカーソルを乗せたら、記事を半透明
.articleText:hover{/* 記事を触ったら記事をを半透明 */
-moz-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}
-moz-opacity: 0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}
★ 白黒・・・・・ＩＥのみ有効
例
◆ 画像にカーソルを乗せたら、画像を白黒に（ＩＥのみ）
a:hover img{
filter: gray();
}
filter: gray();
}
◆ 記事の画像にカーソルを乗せたら、画像を白黒に（ＩＥのみ）
.articleText:hover img{
filter: gray();
}
filter: gray();
}
★ ウエーブ（波）・・・・・ＩＥのみ有効
例
◆ リンク画像にカーソルを乗せたら、画像にウエーブを（ＩＥのみ）
a:hover img{
filter: wave(freq=3, strength=30, lightstrength=10);
}
filter: wave(freq=3, strength=30, lightstrength=10);
}
◆ 記事リンク画像にカーソルを乗せたら、画像にウエーブを（ＩＥのみ）
.articleText:hover img{
filter: wave(freq=3, strength=30, lightstrength=10);
}
filter: wave(freq=3, strength=30, lightstrength=10);
}
★ 円形グラデーション・・・・・ＩＥのみ有効
例
◆ リンク画像にカーソルを乗せたら、画像に円形グラデーションを（ＩＥのみ）
.articleText a:hover img{
filter: alpha(style=2,opacity=100,finishopacity=0);
}
filter: alpha(style=2,opacity=100,finishopacity=0);
}
◆ 記事リンク画像にカーソルを乗せたら、円形グラデーションを（ＩＥのみ）
.articleText a:hover img{
filter: alpha(style=2,opacity=100,finishopacity=0);
}
filter: alpha(style=2,opacity=100,finishopacity=0);
}
★ ぶれ・・・・・ＩＥのみ有効
例
◆ リンク画像にカーソルを乗せたら、画像にぶれを（ＩＥのみ）
a:hover img{
filter:blur(strength=30,direction=315);
}
filter:blur(strength=30,direction=315);
}
◆ 記事リンク画像にカーソルを乗せたら、ぶれを（ＩＥのみ）
.entry a:hover img{
filter:blur(strength=30,direction=315);
}
filter:blur(strength=30,direction=315);
}
関連記事
http://ameblo.jp/new-bulue9/entry-10470631831.html#Top
★ 左右反転・・・・・ＩＥのみ有効
例
◆ 画像にカーソルを乗せたら、画像を左右反転（ＩＥのみ）
aa:hover img{
filter: fliph();
}
filter: fliph();
}
◆ 記事の画像にカーソルを乗せたら、画像を左右反転（ＩＥのみ）
a.articleText:hover img{
filter: fliph();
}
filter: fliph();
}
★ 上下反転・・・・・ＩＥのみ有効
例
◆ 画像にカーソルを乗せたら、画像を上下反転（ＩＥのみ）
a:hover img{
filter: flipv();
}
filter: flipv();
}
◆ 記事の画像にカーソルを乗せたら、画像を上下反転（ＩＥのみ）
.articleText:hover img{
filter: flipv();
}
filter: flipv();
}
★ ズーム・・・・・ＩＥのみ有効
例
◆ 画像にカーソルを乗せたら、画像をズーム（ＩＥのみ）
a:hover img{
ZOOM: 140%;
}
ZOOM: 140%;
}
◆ 記事の画像にカーソルを乗せたら、画像をズーム（ＩＥのみ）
.articleText:hover img{
ZOOM: 140%;
}
ZOOM: 140%;
}