how to put text in while in php just once

Question

I have an image gallery made with fancybox that all the images that appear come from the database. the gallery is something thus.

I have this:

<div id="exterior">
<?php
	$con = mysqli_connect("localhost","root","","gibellino");
	mysqli_set_charset($con,"utf-8");
	$result = mysqli_query($con, "select * from exterior");
	
	$first = 'first';
	echo "<h4>Exterior</h4>";
	
	while($row = mysqli_fetch_array($result)){
		$img = $row['img'];
		echo "
			<a href='images/angel/$img' rel='exterior' title='$img'><img src='images/angel/$img' alt='' id='$first'><span></span></a>
		";
		
		$first = '';
	}
	mysqli_close($con);
	
?>

</div>

and 4 more equal Ivs just changes the id’s practically. And it looks something like this:

And wanted in the border-bottom it was possible to add text but I can’t because I put it inside the while appear all images and if put out of the while stay under the image. Stay like this:

Answer 1

This is perhaps more a CSS issue than PHP itself.

.pai{
  background:purple;
 }

.pai > .filho {
  background:pink;
  float:left;
  width:calc(100% / 4);
  border:1px solid black;
  box-sizing:border-box;
  height:100px;
  position:relative;
}

.text{
  text-align:center;
  width:100%;
}

.pai > .filho:nth-child(odd) .text{
  position:absolute;
  bottom:0;
}

.pai > .filho:nth-child(even) .text{
  position:absolute;
  top:0;
}

<div class="pai">
  
  <div class="filho">
    <div class="text">Texto</div>
  </div>
      
  <div class="filho">
    <div class="text">Texto</div>
  </div>
      
  <div class="filho">
    <div class="text">Texto</div>
  </div>
      
  <div class="filho">
    <div class="text">Texto</div>
  </div>
      
</div>