Text disappears on hover

Please tell me how to make the image enlarge, but the text on the image does not disappear

without hover
with hover

HTML

<div id="cards" class="container">
            <div class="cards">

                <a href="#" class="card_body">
                        <h3 class="card_body-title" >Lil Peep Type Beats</h3>
                        <img src="/img/lil peep.jpg" class="card_img" alt="">
                </a>

                <a href="#" class="card_body">
                        <h3 class="card_body-title">Juice Wrld Type Beats</h3>
                        <img src="/img/juice.jpg" class="card_img" alt="">
                </a>

                <a href="#"class="card_body">
                    <h3 class="card_body-title">Xxxtentacion Type Beats</h3>
                    <img src="/img/tentacion.jpg" class="card_img" alt="">
                </a>

            </div>

    </div>

CSS

.cards{
    display: flex;
    margin-top: 100px;
}

.card_body{
    position: relative;
    width: 30%;
    margin: 20px; 
    color:antiquewhite;
    overflow: hidden;
    border-radius:20px;
}

.card_img{
    transition: all 800ms ease-out;
    width: 100%;
    border-radius:20px;
}

.card_img:hover{
    transform: scale(1.2);
    display: block;
}

.card_body-title{
    position: absolute;
    bottom: 24px;
    left: 10px;
}

The problem is that when the image is enlarged, the text that was on it disappears.I think the problem is in the html, with the parents

Please tell me how to make the image enlarge, but the text on the image does not disappear

>Solution :

Add Z-index property on .card_body-title. it will fix this issue

 .card_body-title {
      position: absolute;
      bottom: 24px;
      left: 10px;
      z-index: 2;
  }