狼読HOMEgraphicsTechnologyLIFEGAME狼読HOMETechnology[css]hoverをした時にボタンの下から背景が出るようにしてみよう2020/04/27Technology#css#html[css]hoverをした時にボタンの下から背景が出るようにしてみよう今回は、hoverをした時にボタンの下から背景が出るようにしてみる物を作ってみようと思います。どんなもんだ?って思うかと思いますが動作は非常にシンプルです。hoverした際に、before要素が上にかぶさってくるといったものです。今回は、ボタンを作ってその上に黒い透過の画面がかかるような物を作ってみようかと思います。class="hover_btn">背景に透過画面がかかる</div>このようにシンプルな物にしようと思います。beforeとafterを上手に使って色々やって見ましょう。CSSのご紹介まずは上記のHTMLをボタンのようなデザインにしてみようと思います。class="hover_btn">背景に透過画面がかかる</div>上述のcssを当てたものが下のものになります。ボタンらしくなりましたね。背景に透過画面がかかる次はhover時のアクションを追加していきましょう。beforeの要素を作って、上にかぶせるブロックを作成しましょう。背景に透過画面がかかるposition:relativeとposition:absoluteを使ってこのようにボタンに下にbeforeでブロックを作成します。このままでは、下のブロックが見えたままになってしまいますね。そのため次のようにブロックからはみ出た場合は、hiddenすると良いでしょう。背景に透過画面がかかる先ほどまであった、赤いbefore要素のブロックが見えなくなってしまいましたね。このbeforeの要素をhoverした時に上のブロックに移動するようにtopを移動させて見ましょう。この際transitionを使用するとアニメーションのように移動します。class="hover_btn">背景に透過画面がかかる</div>サンプル実装例hiddenしてない際の動作。(hoverすると動きます。)背景に透過画面がかかるhiddenさせた場合の動作(hoverすると動きます。)背景に透過画面がかかるこのようにボタンをhoverした際に背景が透過したブロックが被さるようになりましたね。まとめ今回は、cssを使って背景がhoverした際に動くような物を作成いたしました。position:relativeとposition:absoluteを使ってbeforeの要素を動かすことで実現しています。今回は下から動いてくるというものですが、left,rightなど様々な方向から動かすことも可能になります。いろんな場面で試して見てください。徒然なるままに情報を発信します。policyCONTACTfeed&copy。