hoverした時に説明文が出てくるタイルパターンをCSSのみで実装する

よくあるタイル型レイアウトで、hoverした時に説明文が出てくるCSSとHTML。
コーポレートサイトのトップページなどでよく見る。
■HTML

<div class="container">
  <div class="items">
    1
    <span class="items__info">説明文</span>
  </div>
  <div class="items">
    2
    <span class="items__info">説明文</span>
  </div>
  <div class="items">
    3
    <span class="items__info">説明文</span>
  </div>
  <div class="items">
    4
    <span class="items__info">説明文</span>
  </div>
  <div class="items">
    5
    <span class="items__info">説明文</span>
  </div>
  <div class="items">
    6
    <span class="items__info">説明文</span>
  </div>
</div>

■CSS

.container{
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
}
.items{
  position: relative;
  overflow: hidden; /* はみ出た部分を非表示に */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  border: solid 4px #ccc;
  background: #ddd;
  max-width: 100%;
  min-height: 100px;
  &__info{
  	/* 基本は枠外に出して見えなくする */
    position: absolute;
    top: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.8);
    transition: .3s;
    color: #fff;
  }
  &:hover{
    >span{
    	top: 0;
    }
  }
}

ついでなのでgridパターンでやってみた。
細かなデザインはお任せるするが、今回のメインはabsoluteの位置で操作する点。

解説

このパターンの簡単な仕組みは以下

• absoluteでカード全体に覆いかぶさるように表示
• それを枠外に出して非表示にしておく
• 後はhoverしたら位置を戻す

jsでやっても良いが面倒なのでCSSでやることが増えた。
absoluteで幅も高さも100%で用意した領域を、transitionをかけた動きで操作する。
top: 100%;だと高さを計算する必要もなく領域外へ追いやることができるので便利。
備忘録も兼ねて。