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

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

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

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

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

基本的な書き方

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

HTML


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

CSS


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ミリ秒で ゆっくり戻してね
とう意味になります。

イージングの時間設定

イージングの時間は「s(秒)」ですが、「ms(ミリ秒)」でも可能です。
1秒=1000ミリ秒ですので、上記の0.3sの場合では「300ms」としても同じ時間効果になります。

イージングその他のプロパティ

イージングに関しては、以下の様なプロパティもありますのでご紹介します。
色々試してみると面白いです。
●ease(開始と終了が滑らかな動き。何も設定していない場合の初期値です)
●linear(一定に動く)
●ease-in(ゆっくり始まる)
●ease-out(ゆっくり終わる)
●ease-in-out(ゆっくり始まってゆっくり終わる)

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

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

以下がベンダープレフィックスを追加して完成させた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ミリ秒後に透過を開始してね
とう意味になります。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket