Как разместить текст на картинке

HTML

<div class="boxs">
            <div class="box1">
                <a href = "#">
                  <div class="card-image"><img src = "images/m8 (4).png"></div>
                  <div class="body">
                    <div class="post_card_title">
                      <span itemid="headline">
                        <a href="#">
                          BMW M8
                        </a>
                      </span>
                    </div>
                  </div>
                </a>  
            </div>
            
            <div class="box2">2</div>
            <div class="box3">3</div>
            <div class="box4">4</div>
            <div class="box5">5</div>
            <div class="box6">6</div>
          </div>

CSS

.boxs{
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
}
.box1{
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 50px;
    width: 570px;
    height: 318px;
    padding: 20px;
}
.card-image{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-image img{
    width: 100%;
    height: 100%;
    display: block;
}

.body{
    justify-content: flex-end;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    position: relative;
    flex-basis: 0;
    max-width: 100%;
}
.post_card_title{
    padding-top: 100px;
    color: #fff;
    font-size: 1.5em;
    z-index: 4;
}