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

公開日: : 最終更新日:2016/03/24 css

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)



関連記事

no image

インラインCSSの記述で画像を回転させる方法

画像を回転させたいときに使用。ブログなどで外部CSSを使用するのが面倒な時に便利。 html内に下記...

記事を読む

【CSS】印刷時のみ有効となる設定にする

CSSを使って、印刷時のみ有効となる設定をします。これを使用すれば、わざわざ印刷専用のページを作らな...

記事を読む

【CSS】ボックスや画像のカドを丸くする

border-radius はボックスのカドを丸くするプロパティです。<img>に対して...

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

no image
エコノミークラス症候群

エコノミークラス症候群とは?  エコノミークラス症候群は、旅行に関連

no image
巻き爪・陥入爪

巻き爪・陥入爪ってなに?  巻き爪とは、主に親指の爪の両端が「巻く」

no image
結婚お祝い金

披露宴に出る場合 祝儀袋の渡し方  受付でお祝いの言葉を述べ、祝儀

no image
結婚祝い

お祝い品選びと費用 お祝い品の選び方  新居を構える二人には、生活

no image
ダニ除去マニュアル

ダニ除去マニュアルについて  基本的なダニアレルゲン対策としては、

→もっと見る

PAGE TOP ↑