【CSS】マウスオーバーで非表示のコンテンツを表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、マウスオーバーで非表示のコンテンツを表示する方法をご紹介しています。

ボックスに予め非表示のコンテンツを用意しておき、ユーザーがマウスオーバーすることでコンテンツが表示されるといった内容になります。下記にデモを用意しておりますので、動きについてはデモをご確認ください。

See the Pen
Show hidden content on mouseover｜CSS by ryohei (@intotheprogram)
on CodePen.

いかがでしょうか。

「BOX」と表示された要素にマウスカーソルを合わせると、下側からテキストが記載されたコンテンツがにょきっと表示されたかと思います。

このマウスオーバー処理はJavaScriptやjQueryといったスクリプトを使用していないため、動作が軽く、要素の数が増えてもパフォーマンスを心配する必要がありません。「詳細をみる」や「続きをみる」のようなテキストを表示するなど使い方は様々です。ボックスにちょっとした動きをつけたい場合にいかがでしょうか。

では、解説していきます。

HTMLでボックスを作成する

まずはHTMLでボックスを作成します。下記のサンプルでは予め表示しておくコンテンツに「show」というclass属性を、非表示にしておいてマウスオーバーされた場合に表示するコンテンツに「hide」というclass属性を持たせています。あくまでサンプルなので名前は変更してご使用ください。

HTML

<a href="#">
  <div class="show">
    <h1>BOX</h1>
  </div>
  <div class="hide">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p>
  </div>
</a>

CSSで通常時とマウスオーバー時のスタイルを定義する

続いて作成した要素にスタイルを定義していきます。

下記は「SCSS」でスタイルを定義した際のサンプルになります。非表示にしておくコンテンツを「translateY」で下の方にずらしておき、マウスオーバー時に「translateY」の値を初期値に戻す、といったスタイルになります。予め親要素(aタグ)に「overflow: hidden」を指定しておくことで、はみ出したコンテンツが表に表示されないようにしています。

SCSS

a {
  position: relative;
  display: block;
  width: 300px;
  margin: 40px auto;
  color: #a8aabc;
  border: 1px solid #a8aabc;
  overflow: hidden;
  
  .show {
    position: relative;
    height: 200px;
    
    h1 {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 1.5em;
      transform: translate(-50%, -50%);
    }
  }
  
  .hide {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 28px;
    color: #ffffff;
    background-color: #384878;
    transform: translateY(100%);
    transition: transform .5s;
  }
  
  &:hover {
    .hide {
      transform: translateY(0);
    }
  }
}

以上でCSSの作成は完了です。

前項で作成したHTMLと合わせると冒頭でご紹介したデモのような動きになっているかと思います。