Overlay text above image inside a loop in react

Question

how can I loop a text over image inside a loop in react? As of now, this is only I can achieve. Is there a way to position the text above the image?

This is just the snippet of my code

<div className="images">
  {/* looped over images to render */}
  {images.map((img, i) => (
    <>
      <img
        title={img.text}
        className="images__image"
        src={img.image}
        key={i}
        alt={img.text}
      />
      <p className="images__text">{img.text}</p>
    </>
  ))}
</div> 
 //scss
    .images {
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;

    &__image {
        border-radius: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
        margin: 10px;
        padding: 20px;
        min-width: 50%;
        min-height: 50%;
        height: 80%;
        width: 80%;
    }
}

Answer 1

If you want the <p></p> part appear above the <img> part, then you can enclose both in a div like this <div> <img><p></p> </div> , then add position: abosolute styling for <p> tag

Edit: I just tested this and found that paragraph <p> tag needs to be infront of img tag for this to work properly. ie <div> <p></p><img> </div>