画像の端や一部にテキストを被せる（乗せる）デザインです。
◆まずはデモページをご覧ください。
デモページを見る
テキストを縦中央に配置するために、テキストの子要素に下記の記述をするのがポイントです。
ソース
top: 50%;
transform: translateY(-50%);
transform: translateY(-50%);
これで縦の中央寄せが出来ます。
ファイル一式をご希望の方は、下記よりダウンロードしてください。
【CSS・レスポンシブ】画像にテキストを被せる
【 css40.zip（82KB） 】
266 ダウンロード