ギャラリーページなどで、サムネイル画像の一覧を並べて配置する場合などに、ある特定の要素にマウスオーバーした際にちょっとした効果を付けてみたいと思います。ここでは、フォーカスの当たった要素以外を半透明にすることで視線を特定要素に集中させることが可能となります。
CSSのみで簡単に実現出来るので、試してみてください。
▼こんな感じになります。
それでは、サンプルを確認していきましょう。
1.HTMLを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<article id="container"> <div class="box"> <img src="images/sample.jpg" alt="紅葉" /> <p>秋になりましたね。</p> </div> <div class="box"> <img src="images/sample.jpg" alt="紅葉" /> <p>秋になりましたね。</p> </div> <div class="box"> <img src="images/sample.jpg" alt="紅葉" /> <p>秋になりましたね。</p> </div> <div class="box"> <img src="images/sample.jpg" alt="紅葉" /> <p>秋になりましたね。</p> </div> <div class="box"> <img src="images/sample.jpg" alt="紅葉" /> <p>秋になりましたね。</p> </div> <div class="box"> <img src="images/sample.jpg" alt="紅葉" /> <p>秋になりましたね。</p> </div> </article> |
全体を「#container」で囲い、それぞれのサムネイルを<div class=”box”>～</div>という要素に入れて、左にfloatさせています。
2.CSSを記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* すべてのDIVのスタイル */ #container .box { width: 200px; float: left; margin: 10px 0 0 10px; padding: 10px; background: #FFF; border: 1px solid #ccc; text-align: center; } /* DIVの中に配置した画像のスタイル */ #container .box img { width: 200px; border: 1px solid #a0956b; box-sizing: border-box; } /* ユーザーがいずれかのDIVにマウスオーバーをした時のすべてのDIVのスタイル */ #container:hover .box { zoom: 1; filter: alpha(opacity=30); opacity: 0.3; -webkit-transition: opacity 0.6s ease-in; -moz-transition: opacity 0.6s ease-in; -ms-transition: opacity 0.6s ease-in; -o-transition: opacity 0.6s ease-in; transition: opacity 0.6s ease-in; } /* マウスオーバーされた特定のDIVのスタイル */ #container .box:hover { box-shadow: 0 2px 10px #666; border-color: #7d7143; background: #7d7143; color: #fff; cursor: pointer; /* opacity */ zoom: 1; filter: alpha(opacity=100); opacity: 1; } |
まずは、<div class=”box”>の横幅を200pxに指定し、float:leftで左寄せにしています。そして、「.box」内のimg要素の横幅を200pxで統一します。
次に「#container」に対してマウスオーバーした際に「.box」の全てを不透明度30％になるように指定し、実際にマウスオーバーされた特定の「.box」のみ透明度0％や背景色を付けるなどの指定をしています。
以上になります。