0

CSSのみで要素がス~っと出たり消えたりする方法

CSSのみで要素がス~っと出たり消えたりする方法

ある要素に対して、カーソルがマウスオーバーした際のエフェクトのひとつ、“ フェードイン ”と“ フェードアウト ”をCSSのみを使って表現する方法をご紹介します。今回はス~っと出たり消えたりする柔らかい感じも付け加えました。

ギャラリーサイトのサムネイルなどで、半透明にするだけでは物足りない!
って感じたりしたら少し自由度を上げてみてもいいんじゃないでしょうか?

サンプルをご用意しましたので、こちらも確認してみてください。

デモサンプル

それでは、ひとつずつ見ていきましょう。




イメージ画像の場合

HTMLを記述

フェードインのパターンに「.c1」というクラス名を割り当てています。逆にフェードアウトのパターンには「.c2」というクラス名です。

CSSを記述

どちらも「img」タグに対して、「transition」プロパティに「transition: all 1s;」と記述しています。

この「transition」プロパティは、時間的変化を指定するものですが、その対象としてデフォルトで「all」になっています。もし変化させるプロパティ名を細分化したい場合は、プロパティ名のリストをカンマ( , )区切りで指定すればOKです。特に難しいことをするわけではない場合「all」で間違いないと思います。

そして「1s」とは、変化に要する時間の指定となり「1s は1秒間をかけて○○する」という時間指定になっています。

そして、「img:hover」に対して「opacity: 1;」や「opacity: 0;」の指定をすることで、表示させたり非表示にしたりしています。

c1

c2

テキストの場合

では次に、イメージ画像ではなく「テキスト」の場合も見ていきたいと思います。

HTMLを記述

CSSを記述

先ほどの画像の場合と、指定している内容は同じになります。

c3

c4

単純に、フェード効果を適用させたい場合など、こんな感じで指定すれば良いかと思います。
是非試してみてください。

 

コメントを残す

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

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

mororeco > CSS > CSSのみで要素がス~っと出たり消えたりする方法