[css]hoverをした時にボタンの下から背景が出るようにしてみよう

今回は、hoverをした時にボタンの下から背景が出るようにしてみる物を作ってみようと思います。一体どんなもんだ？って思うかと思いますが動作は非常にシンプルです。hoverした際に、before要素が上にかぶさってくるといったものです。

HTMLの構造

今回は、ボタンを作ってその上に黒い透過の画面がかかるような物を作ってみようかと思います。

<div class="hover_btn">背景に透過画面がかかる</div>

このようにシンプルな物にしようと思います。beforeとafterを上手に使って色々やって見ましょう。

CSSのご紹介

まずは上記のHTMLをボタンのようなデザインにしてみようと思います。

<style>
.hover_btn1{
 width:300px;
 text-align:center;
 padding-top:10px;
 padding-bottom:10px;
 background:#eee;
 border:1px solid #000;
}
</style>
<div class="hover_btn">背景に透過画面がかかる</div>

上述のcssを当てたものが下のものになります。
少しボタンらしくなりましたね。

サンプル実装例

次はhover時のアクションを追加していきましょう。
まずは、beforeの要素を作って、上にかぶせるブロックを作成しましょう。

<style>
.hover_btn{
 width:100%;
 text-align:center;
 padding-top:10px;
 padding-bottom:10px;
 background:#eee;
 border:1px solid #000;
 position:relative;
 margin-bottom:50px;
}
.hover_btn:before{
 position:absolute;
 content:"";
 width:100%;
 height:100%;
 background:rgb(255,0,0,0.2);
 top:46px;
 left:0;
}
</style>
<div class="hover_btn">背景に透過画面がかかる</div>

サンプル実装例

position:relativeとposition:absoluteを使ってこのようにボタンに下にbeforeでブロックを作成します。このままでは、下のブロックが見えたままになってしまいますね。そのため次のようにブロックからはみ出た場合は、hiddenすると良いでしょう。

<style>
.hover_btn{
 width:100%;
 text-align:center;
 padding-top:10px;
 padding-bottom:10px;
 background:#eee;
 border:1px solid #000;
 position:relative;
  overflow:hidden;
}
.hover_btn:before{
 position:absolute;
 content:"";
 width:100%;
 height:100%;
 background:rgb(255,0,0,0.2);
 top:46px;
 left:0;
}
</style>
<div class="hover_btn">背景に透過画面がかかる</div>

サンプル実装例

先ほどまであった、赤いbefore要素のブロックが見えなくなってしまいましたね。では、このbeforeの要素をhoverした時に上のブロックに移動するようにtopを移動させて見ましょう。この際transitionを使用するとアニメーションのように移動します。

<style>
.hover_btn{
 width:100%;
 text-align:center;
 padding-top:10px;
 padding-bottom:10px;
 background:#eee;
 border:1px solid #000;
 position:relative;
 overflow:hidden;
}
.hover_btn:before{
 position:absolute;
 content:"";
 width:100%;
 height:100%;
 background:rgb(255,0,0,0.2);
 top:46px;
 left:0;
 transition:1s all;
}
.hover_btn:hover:before{
 top:0;
 transition:1s all;
}
</style>
<div class="hover_btn">背景に透過画面がかかる</div>

サンプル実装例

hiddenしてない際の動作。（hoverすると動きます。）

hiddenさせた場合の動作（hoverすると動きます。）

このようにボタンをhoverした際に背景が透過したブロックが被さるようになりましたね。

まとめ

今回は、cssを使って背景がhoverした際に動くような物を作成いたしました。position:relativeとposition:absoluteを使ってbeforeの要素を動かすことで実現しています。今回は下から動いてくるというものですが、left,rightなど様々な方向から動かすことも可能になります。ぜひいろんな場面で試して見てください。