画像の上に文字を配置

マウスオーバーで注釈を出す方法です。
通常時に注釈を隠し、マウスオーバー時にtranslateY()で縦方向に移動させることで
配置します。

■html

■css
figure.test {
text-align: center;
overflow: hidden;
position: relative;
width: 100%;
}

figcaption.overray-cap {
bottom: 0;
left: 0;
position: absolute;
transform: translateY(100%);
transition: all .35s;
width: 100%;
-webkit-transition: all .35s;
}

figure.test:hover .overray-cap {
transition-delay: .1s;
transform: translateY(0);
}

figure.test img {
vertical-align: bottom;
width: 100%;
}