イメージをインラインで反応させ、テキストを上にして返す

Question

div内の行に3つのイメージをスペースなしで入力しようとしていて、別のページにクリックする各イメージにテキストが表示されます。私はこれの解決策はおそらく両方の要素の位置にあることを理解していますが、テキストが正しいイメージにとどまるようには見えません。誰かがこれで私を助けることができたらそれは素晴らしいだろうか？

以下はHTMLです。

<div class="services"> 
      <div id="text-overlay"> 
       <img src="Untitled-5.jpg"> 
       <p>Landscaping</p> 
      </div> 
      <div id="text-overlay"> 
       <img src="Untitled-6.jpg"> 
      </div> 
      <div id="text-overlay"> 
       <img src="Untitled-7.jpg"> 
      </div> 
     </div> 

とCSS：

#text-overlay { 
    position: relative; 
} 

img { 
    display: block; 
    width: 33.3333333333%; 
    float: left; 
    height: 250px; 
} 

#text-overlay p { 
    position: absolute; 
    top: 1%; 
    left: 1%; 
    background-color: firebrick; 
    color: white; 
    padding: 1%; 
} 

任意の助けをいただければ幸いです。これを行うにはこれが最善の方法ですか、より良い選択肢がありますか？

Answer 1

コードにエラーがほとんどありません。まず、個々の要素に一意のIDを使用してください。これらの条件にはbackground-imageを使用する必要があります。詳細はhereを参照してください。

画像にオーバーレイしたい場合は、hereから学びます。