【Studio実装】CSSを使ってホバーでふわっと表示をさせてみよう

こんにちは。
今回は「ホバーでふわっと表示」です。

こちらはどちらかといえばデザイン的な要素が強いものかと思います。
見せたい情報はあえて隠さない方が良いと思うので
使いどころは見極めたい要素ですね。

私は自身のページを作る際に
表紙にプロフィールを固定で置いておくとくどいな…
と思い動的に余白を確保できる仕様にしたかった
という完全なる好みで使いました。

１. 機能実現イメージ

実装する機能はこんな感じです。

左側のパーツをマウスオーバーすると
プロフィールを書いたパーツがふわっとします。

これを、簡易なCSSで実装する方法をご紹介します。

ふわっとさせるかどうかは設定値次第なので
実際には同じボックス内にないパーツをinホバーのように操作する機能になります。

機能の制約事項

簡易なCSSだけで実現させる場合の制約としては
HTMLを書くときと異なり
特定のクラスでCSSを宣言するという形ではないので
<タグ>構造が同じ場合全てに効いてしまうという難点があります。

今回は<button>を使っているため
同一ページ上に本機能箇所以外で<button>を使っている場合
この実装の影響を受けてしまうので要注意です。

万能ではないですが、要件が合えば簡単なので是非試してみてください。

HTMLが書ける方は
この機能全体をカスタムでコード埋め込みとすることでこちらの制約も解決でからかと思いますが
そこまで自力でカスタマイズできる方は
こちらのホバー機能もご存知かと思いますので
今回はCSSのみの実装で続けたいと思います！

類似機能の検討

ちなみに。

同じボックス内にないパーツの操作でいうと
類似のものにモーダルを使う方法がありますね。

こちらはクリック操作でコントロールするものなので、
例えばモバイルのハンバーガメニューのような実装の場合には、
モーダル使用も検討したいですね。

STUDIOでハンバーガーメニューを作る方法 - おかげデザインBlogSTUDIOでハンバーガーメニューを作る方法 | おかげデザインBlog

２. 実装方法

実装方法概要

前章で触れた通り
本実装は<button>をアクションのトリガーとし
button + div の階層に対して
CSSのアクションhoverを使って実現します。

加えてふわっと感を出すために
fadeのクラスを追加して値を調整するだけ◎

実装手順

（1）HTML階層を作ります

簡単なお仕事です。

動画で言うところの「KAH.K」=ホバー部分を
<button>で作成します。

ふわっと出したいものを<div>に入れて
<button>と同じ階層に設定します。

Studioのレイヤー構造

<button>  ホバー部分
  <div>   任意の文字列やアイコン
<div>     ふわっと部分  
　•••

（2）CSSを設定します

以下をもとにカスタマイズしていただくと良いかと思います。

<style>
button + div {
    height: 0 !important;
    padding: 0 40px !important;
    margin-bottom:0 !important;
    opacity: 0;
    visibility: hidden;
  }
  
button:hover + div {
    height: auto !important;
    padding: 40px 40px !important;
    margin-bottom:0 !important;
    opacity: 1;
    visibility: visible;
    animation-name: fade;
    animation-duration: 1s;

}

@keyframes fade{
  0%{
    opacity: 0;
    transform: translateY(80px);
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
} 

</style>

補足解説

CSSは基本的にふわっと出てくる方の仕様を指定しています。

button + div
はホバー前なのでopacityは0
visibilityはhidden
に設定しておきます

padding等は必要に応じてご自由にカスタマイズしてみてください。

button:hover + div
はホバー後なのでopacityは1
visibilityはvisible
に設定されています
さらに
animation-nameで下に指定しているfadeアニメーションを呼び出し
animation-durationでfadeの時間を設定しています

fade時間は色々いじって動かしてみて
お好みの時間を決めていただくと良いかと思います。

@keyframes fade
こちらは呼び出すfadeの仕様なので
ふわっと感を設定しているのはここです。
下から上に浮かび上がるようにしたかったので
0%の時のY値を80下げています。

こちらもどこからどう動かすか
どのくらい動かすか
調整してみてくださいね。

それでは本日はここまでです。
ありがとうございました！