Currently, I am attempting to practice by replicating the design shown in this image:
https://i.sstatic.net/iIA2q.jpg
However, I have encountered an issue that has been persisting for some time:
https://i.sstatic.net/grABz.png
I'm struggling to understand why this issue is occurring. An interesting observation is that if I remove the first div, the second div (which then becomes the first) experiences the exact same problem. Furthermore, all four divs share identical CSS properties except for z-index, so why does only the first div exhibit this behavior?
Below is a shortened version of my HTML code:
<div class="row">
<!-- Card #1 -->
<div class="col-md-3">
<div class="card-container first-card">
<div class="card-component">
<a href="#">
<div class="front">
<img src="img/img-presentation1.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
<!-- Card #2 -->
<div class="col-md-3">
<div class="card-container second-card">
<div class="card-component">
<a href="#">
<div class="front">
<img src="img/img-presentation1.jpg" alt="" />
</div>
</a>
</div>
</div>
</div>
</div>
<div class="row bg-grey">
And here is the corresponding CSS:
#sliding-cards .card-container {
perspective: 900px;
width: 300px;
position: relative;
margin-top: 90px;
}
#sliding-cards .card-component{
transform-style: preserve-3d;
position: relative;
height: 500px;
}
#sliding-cards .front {
transform: rotateY(-35deg);
position: absolute;
top: 0;
left: 0;
width: 100%;
border-radius: 10px;
overflow: hidden;
}
#sliding-cards img{
vertical-align: middle !important;
border-style: none;
width: 100%;
z-index: 2;
position: relative;
max-width: 100%;
}
The cards are assigned z-index values of 6, 5, 4, and 3 respectively, while the div beneath them (with the grey background) has a z-index of 7;
Thank you to everyone who can provide assistance with this issue!