マウスオーバーで画像にキャプション

画像をマウスオーバーした時に、下から1/3くらいの高さでタイトルとキャプションを表示させる方法を。
スタイルシートだけで簡単にできます。

HTMLはfigureでマークアップしてあり、figureのCSSは「overflow: hidden」ではみ出ないようにしています。

flower

Flower Illust

これは手描きの花です。

HTML

<figure><img class="alignnone size-medium wp-image-2830" src="https://www.design-wave.net/wp-content/uploads/2015/03/flower-300x225.jpg" alt="flower" width="300" height="225" />
<figcaption>
<h3>Flower Illust</h3>
これは手描きの花です。
</figcaption></figure>

CSS

figure {
	position: relative;
	overflow: hidden;
	width: 300px;
	height: 225px;
}

figcaption {
	position: absolute;
	bottom: -60px;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 60px;
	background: rgba(255,255,255,.5);
	-webkit-transition: .3s;
	transition: .3s;
}

figure:hover figcaption {
	bottom: 0;
}

figcaption h3 {
	font-size: 1em;
	font-weight: normal;
	margin: 5px auto 3px;
	text-align: center;
	color: #333333;
}

figcaption p {
	font-size: .85em;
	font-weight: normal;
	margin: 3px auto 5px;
	text-align: center;
	color: #666666;
}

figureのwidthとheightは、画像の横と縦のサイズです。