web025 CSSのみでのキャプションエフェクト

CSSのみでのキャプションエフェクト

■考え方
・positionレイアウト
・キャプションはimgの下に配置しておき、overflow:hidden;で非表示にしておく。
・hoverでpositionのbottomを変更し表示する。
・リセットcssにfigure,figcaptionなど入れ忘れに注意。

■コード
html

<div class="main2">
<figure>
<img src="img/tokage.png" alt="とかげ">
<figcaption>
<h3>キャプションタイトル</h3>
<p>キャプション本文</p>
</figcaption>
</figure>
</div><!-- .main2 -->

css

/*----------------------------.main2*/
.main2{
  width: 500px;
  height: 500px;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #555;
}
.main2 figure{
  margin: 0 auto;
  position: relative;
}
.main2 figcaption{
  background-color: rgba(0,0,0,0.5);
  width: 500px;
  height: 150px;
  text-align: center;
  position: absolute;
  bottom: -150px;
  transition: 1.5s;
}
.main2 figure:hover figcaption{
  bottom: 0px;
}
.main2 figcaption h3{
  color: #fff;
}
.main2 figcaption p{
  color: #fff;
}

■参考
CSSのみで実装するキャプションエフェクト 20 | NxWorld