ある要素に対して、カーソルがマウスオーバーした際のエフェクトのひとつ、“ フェードイン ”と“ フェードアウト ”をCSSのみを使って表現する方法をご紹介します。今回はス～っと出たり消えたりする柔らかい感じも付け加えました。
ギャラリーサイトのサムネイルなどで、半透明にするだけでは物足りない！
って感じたりしたら少し自由度を上げてみてもいいんじゃないでしょうか？
サンプルをご用意しましたので、こちらも確認してみてください。
それでは、ひとつずつ見ていきましょう。
イメージ画像の場合
HTMLを記述
フェードインのパターンに「.c1」というクラス名を割り当てています。逆にフェードアウトのパターンには「.c2」というクラス名です。
|
1 2 3 4 5 6 |
<section> <div class="c1"><a href="#"><img src="images/sample1.jpg" alt="" /></a></div> </section> <section> <div class="c2"><a href="#"><img src="images/sample2.jpg" alt="" /></a></div> </section> |
CSSを記述
どちらも「img」タグに対して、「transition」プロパティに「transition: all 1s;」と記述しています。
この「transition」プロパティは、時間的変化を指定するものですが、その対象としてデフォルトで「all」になっています。もし変化させるプロパティ名を細分化したい場合は、プロパティ名のリストをカンマ（ , ）区切りで指定すればOKです。特に難しいことをするわけではない場合「all」で間違いないと思います。
そして「1s」とは、変化に要する時間の指定となり「1s は1秒間をかけて○○する」という時間指定になっています。
そして、「img:hover」に対して「opacity: 1;」や「opacity: 0;」の指定をすることで、表示させたり非表示にしたりしています。
|
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 |
.c1,.c2{ width: 450px; height: 300px; margin: 0 auto; padding: 0; border: 1px solid #999; box-sizing: border-box; margin-bottom:20px; } .c1 img{ width: 100%; height: auto; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; overflow: hidden; } .c1 img:hover{ opacity: 1; } .c2 img{ width: 100%; height: auto; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 1.0; overflow: hidden; } .c2 img:hover{ opacity: 0; } |
テキストの場合
では次に、イメージ画像ではなく「テキスト」の場合も見ていきたいと思います。
HTMLを記述
|
1 2 3 4 5 6 |
<section> <div class="c3"><a href="#">FadeIn</a></div> </section> <section> <div class="c4"><a href="#">FadeOut</a></div> </section> |
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 |
.c3,.c4{ width: 450px; height: 100px; margin: 0 auto; padding: 0; margin-bottom:20px; font-size: 80px; line-height: 80px; text-align: center; } .c3 a{ width: 100%; height: auto; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 0; overflow: hidden; color: #81b43a; } .c3 a:hover{ opacity: 1; } .c4 a{ width: 100%; height: auto; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; opacity: 1.0; overflow: hidden; color: #81b43a; } .c4 a:hover{ opacity: 0; }</pre> |
単純に、フェード効果を適用させたい場合など、こんな感じで指定すれば良いかと思います。
是非試してみてください。
関連する記事はこちらです。
