I am trying to position an info box over an image but still have both stay inside the container

I have tried things like using position absolute on one and position relative on the other but it always messes up one so that it overflows even though i have set overflow to hidden. This is my code so far.(ignore the fact that it says className and not class)

<div className="card">        <div className="img">          <img src={props.image} alt="" />        </div>        <div className="infoContainer">          <h2>{props.title}</h2>          <h3>{props.description}</h3>        </div>      </div>  

that is the jsx

.card {    display: flex;    width: 400px;    height: 500px;    background-color: blue;    border-radius: 20px;    margin-left: 20px;    overflow: hidden;  }  .infoContainer {    display: flex;    flex-direction: column;    width: 100%;    background-color: aqua;    align-self: flex-end;    align-items: center;    justify-content: center;    padding: 10px;  }  .img {  }  

anyone have any ideas? Any help is much appreciated. This is the output of what i have so far im not sure what to do. Im trying to get the image to be where the dark blue is.

https://stackoverflow.com/questions/66095127/i-am-trying-to-position-an-info-box-over-an-image-but-still-have-both-stay-insid February 08, 2021 at 10:14AM