かじこの備忘録

cssで画像をマウスオーバー時に半透明にする

a:hover時のimgに対してcssで指定します。

a:hover img {
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);
}

｢opacity｣

0.0～1.0の値で透明度を指定。0.0が透明で1.0が不透明。
CSS3.0が適応されているIE9以上、Firefox、Chrome 対応。IE8以下では出来ないので別に指定。

「-moz-opacity」

0.0～1.0の値で透明度を指定。0.0が透明で1.0が不透明。
IE8や古いFireFox、Netscape対応。

「filter」

opacity=0～100の値で透明度を指定。 0が透明で100が不透明。
IE6、7対応。

cssで画像をマウスオーバー時にフェードをつけて半透明にする（IE9以上）

a img { 
    -webkit-transition: 0.3s ease-in-out; 
    -moz-transition: 0.3s ease-in-out; 
    -o-transition: 0.3s ease-in-out; 
    transition: 0.3s ease-in-out;  
} 
a:hover img { 
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70); 
} 

jQueryで画像をマウスオーバー時にフェードをつけて半透明にする

1. headerにjQueryを読み込む

2. jQueryの記述

$(document).ready(
function(){
$("a img").hover(function(){
$(this).fadeTo("normal", 0.7); // マウスオーバー時にnormal速度で、透明度を70%にする
},function(){
$(this).fadeTo("normal", 1.0); // マウスアウト時にnormal速度で、透明度を100%に戻す
});
});

フェードの速度

”slow”, “normal”, “fast” の文字列か、もしくは、ミリ秒を数値で指定。（1秒＝1000）