Need guidance on placing a row of divs (each with 3 columns of images) on top of a parent div (image) using Bootstrap 5. Previously used position: absolute, but encountering overflow issues. Attempted overflow: visible as well. Provided below is the code snippet and the current result. Appreciate any assistance.
.accomplishments{
background: url("https://picsum.photos/1000/600");
width: 100%;
height: 40rem;
background-size: cover;
margin-top: 12rem;
position: relative;
}
.project-tray{
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y:visible ;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<main>
<div class="container" >
<h1 class="">Accomplishments</h1>
</div>
<div class="container-fluid accomplishments mb-5 ">
<div class="container" >
<div class="row project-tray ">
<div class="col " >
<img src="https://picsum.photos/300/301" class="img-fluid " alt="">
</div>
<div class="col">
<img src="https://picsum.photos/300/302" class="img-fluid" alt="">
</div>
<div class="col">
<img src="https://picsum.photos/300/303" class="img-fluid" alt="">
</div>
</div>
</div>
</div>
</main>Links to output images: