I've experimented with different approaches, such as using position absolute on one element and position relative on the other. However, I always face issues where one overflows, despite setting overflow to hidden. Below is my current code snippet. (Please note that it says className instead of 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>
This JSX component contains a card:
.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 {
}
Seeking suggestions from anyone who might have ideas or solutions. Your assistance is greatly appreciated. Here's the result of what I have so far, but I'm unsure how to proceed. I'm attempting to position the image where the dark blue area is shown in this output. https://i.sstatic.net/PZXip.png