Place text inside the image

Question

Here is my code

 .imgs{
   position:absolute;
   margin-top: -180px; 
   margin-left: 25px; 
   width: 200px; 
   height: 200px;
    }

<td style="width: 200px;"><?php echo '<img width=200px; src="'.$imagens[$aleatorio].'"'; ?></td>
  <figcaption style="width: 200px;" class="imgs"><?php  echo $list; ?></figcaption>
  
  
  

Answer 1

You can use the position: absolute; and change the location of the text with left , top, right and bottom

For too wide texts you can use the max-width and set the maximum size

span {
  position: absolute;
  left: 75px;
  top: 75px;
  color: white;
  max-width: 75px;
}

<div>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSG2SKL5FJaXqyHfvxrxb5NmQ4ZcWgCPyaZvqEB0qsSubAyQHOBkw">
  <span>texto muito largo para caber em uma linha</span>
</div>