Why I can't set image on top of div in scroll wrapper div card - html

Question

I created a cards-based horizontal scroller. And the cards are nicely scrolling inside the wrapper. The issue I'm having is that even after I applied the z-index to our member-owner-card-image, the photos still go under the card when I want to put them on the top of each card.
Is there any solution so that I can add the image on top of the card? I'm trying to fix it, but no solution has been found.
.scrolling-wrapper {
-webkit-overflow-scrolling: touch;
height: 331px;
width: 100%;
padding-inline: 40px;
position: relative;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
z-index: 0;
}
.scrolling-wrapper::-webkit-scrollbar {
display: none;
}
.card {
width: 100%;
flex: 0 0 auto;
background-color: green;
border-radius: 20px;
position: relative;
margin-right: 10px;
}
.our-member-owner-card-image {
position: absolute;
top: -30px;
z-index: 10;
}
.card-content {
position: absolute;
padding-top: 38px;
}
.member-detail {
padding-top: 55px;
line-height: 1.7;
}
.member-detail h3 {
text-align: center;
color: #263244;
font-weight: 700;
font-family: 'Lato';
}
.member-detail p {
text-align: center;
color: #737C89;
}
.member-description {
padding-inline: 20px;
color: #263244;
line-height: 1.6;
padding-top: 9px;
font-weight: 500;
font-size: 17px;
}
.member-description span {
color: red;
text-decoration: underline;
}
<div class="scrolling-wrapper">
<div class="card">
<div class="our-member-owner-card-image">
<img width="220px" src="https://images.unsplash.com/photo-1661961110144-12ac85918e40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
</div>
<div class="card-content">
<div class="member-detail">
<h3>Sohaib</h3>
<p>Chairman</p>
</div>
<div class="member-description">
Sohaib Ashraf has extensive work experience during his career
of more than 25 years in the financial services sector.<span
>Read more</span
>
</div>
</div>
</div>
<div class="card">
<div class="our-member-owner-card-image">
<img width="220px" src="https://images.unsplash.com/photo-1661961110144-12ac85918e40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" />
</div>
<div class="card-content">
<div class="member-detail">
<h3>Sohaib Ashraf</h3>
<p>Chairman</p>
</div>
<div class="member-description">
Sohaib Ashraf has extensive work experience during his career
of more than 25 years in the financial services sector.<span
>Read more</span
>
</div>
</div>
</div>
</div>

Answer 1

You could add the image as a background-image to the card. I added few examples how you can use background-image:
.card{
width: 400px;
height: 300px;
margin: 10px;
border-radius: 6px;
background-color: gray;
}
.card-1, .card-2 .image, .card-3 .image{
/* Here, we use background-image to set the image */
background-image: url("https://images.unsplash.com/photo-1661961110144-12ac85918e40?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
/* The background should be a cover photo,
so it fills the whole card: */
background-size: cover;
/* We don't want the image to repeat itself */
background-repeat: no-repeat;
/* When the ratio of the image changes, it will zoom into
this point, which we want to happen in the center of the image */
background-position: center;
}
.card-2, .card-3{
display: grid;
grid-template-rows: 1fr 1fr;
}
.card-2 .image{
border-radius: 6px 6px 0px 0px;
}
.card-3{
padding: 10px;
}
/* This is to demonstrate: */
h2{
color: white;
display: flex;
justify-content: center;
font-family: sans-serif;
}
<div class="card-1 card">
<h2>Test title</h2>
</div>
<div class="card-2 card">
<div class="image"></div>
<div class="content">
<h2> Test title</h2>
</div>
</div>
<div class="card-3 card">
<div class="image"></div>
<div class="content">
<h2> Test title</h2>
</div>
</div>