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.