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" >
            <div >

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

                <a href="#" >
                        <h3 >Juice Wrld Type Beats</h3>
                        <img src="/img/juice.jpg"  alt="">
                </a>

                <a href="#">
                    <h3 >Xxxtentacion Type Beats</h3>
                    <img src="/img/tentacion.jpg"  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

CodePudding user response：

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;
  }