画像の上に文字「どの画像にも同じ場所に文字を配置する方法」CSS

今回は、画像の上に文字を配置するCSSの忘備録です。
こんなかんじの画像を作りたかったのです↓
画像文字のサンプル

やり方は、こちらを参考にしました↓

画像の上におしゃれに文字やボタンをのせる方法(CSS)

HTMLサンプル

CSSサンプル

出来上がった画像がこれ

火星大接近

キレイですね
火星の大接近

火星大接近

キレイですね
火星の大接近

上記のCSSだと、スマホ表示でも、横並びになる可能性があります。
スマホだけ縦並びにしたい場合は、以下の記事を参考にしてください。
パソコンとスマホで画像タグの並び替えイメージ
>>PC画像横並び「スマホ表示では縦」にするCSS