0

特定の要素以外をフェードアウトさせる方法

特定の要素以外をフェードアウトさせる方法

 

ギャラリーページなどで、サムネイル画像の一覧を並べて配置する場合などに、ある特定の要素にマウスオーバーした際にちょっとした効果を付けてみたいと思います。ここでは、フォーカスの当たった要素以外を半透明にすることで視線を特定要素に集中させることが可能となります。

CSSのみで簡単に実現出来るので、試してみてください。

 

 ▼こんな感じになります。

highlight-preview

 

DEMO

 

 

それでは、サンプルを確認していきましょう。

 

1.HTMLを記述

全体を「#container」で囲い、それぞれのサムネイルを<div class=”box”>~</div>という要素に入れて、左にfloatさせています。

 

2.CSSを記述

 まずは、<div class=”box”>の横幅を200pxに指定し、float:leftで左寄せにしています。そして、「.box」内のimg要素の横幅を200pxで統一します。

次に「#container」に対してマウスオーバーした際に「.box」の全てを不透明度30%になるように指定し、実際にマウスオーバーされた特定の「.box」のみ透明度0%や背景色を付けるなどの指定をしています。

 

以上になります。

 


 

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 特定の要素以外をフェードアウトさせる方法