دو روش برای افزودن متن روی تصاویر

<div class="example">
 </div>

.example {
    width: 187px;
    height: 347px;
    border-radius: 10px;
  font-family: Poppins;
}

<div class="example">
        <img src="https://images.unsplash.com/photo-1643678063167-1916c49968e6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
    </div>

.example > img {
    width: inherit;
    height: inherit;
    object-fit: cover;
    position: absolute;
    border-radius: inherit;
}
/*Note: the inherit property value is used 
to give something the same value as its parent*/

<div class="example">
        <img src="https://images.unsplash.com/photo-1643678063167-1916c49968e6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80">
<!--text container-->
      <div class="exampleInfo">
<!--I also put the text in one smaller container so i can center the header-->
        <div class="info1">
            <h4>The Florida Keys</h4>
          <p>Plane arriving at May 15th, 6am</p>
        </div>
      </div>
    </div>

.exampleInfo {
    color: white;
    width: inherit;
    height: inherit;
    position: relative;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 14.06%, #1E1E1E 100%);
/*Placing the text at the bottom*/
  display: flex;
  align-items: flex-end;
  text-align: center;
  font-size: 20px
}


.info1 > h4 {
  display: flex;
  align-items: center;
  justify-content: center;
}

       <div class="exampleTwo">
      <h2>Climb the highest mountains</h2>
         </div>

.exampleTwo {
  width: 187px;
  height: 347px;
  border-radius: 10px;
  text-align: center;
  font-family: Aboreto;
}

.exampleTwo {
  width: 187px;
  height: 347px;
  border-radius: 10px;
  text-align: center;
  font-family: Aboreto;
/*Adding the image*/
    background-image: url('https://images.unsplash.com/photo-1683727610671-646dbf56aedf?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80');
background-size: cover;
}