z-index issue | first div of four not working properly

Question

so for practicing what I'm trying to do is to emulate the following:

But I have been dealing for a while with the following issue:

I'm not understanding why this is happening. A curious thing is, if I delete the first div, the second (which now became first) will face the identical same issue. Also since all four divs share the same css if not for the z-index, why only the first has such a behavior?

Here is my HTML (cut short for brevity):

<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 the 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 have a z-index respectively of 6-5-4-3 and the div under them (the one with the grey background) has a z-index: 7;

JSFiddle

Thank you all for any help you can support me with!

Answer 1

You can fix this by adding z-index: -999999 to .front

html,
body {
  overflow-x: hidden;
  height: 100%;
  font-family: 'Poppins', sans-serif;
  background: #333;
}

#sliding-cards .section-components {
  background: black;
  padding: 70px 0;
  z-index: 1;
  color: #FFFFFF;
  position: relative;
}

#sliding-cards .col-md-3 {
  max-width: 16%;
  padding-left: 100px;
}

#sliding-cards .card-container {
  -webkit-perspective: 900px;
  -moz-perspective: 900px;
  -o-perspective: 900px;
  perspective: 900px;
  width: 300px;
  position: relative;
  margin-top: 90px;
}

#sliding-cards .card-component {
  webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  height: 500px;
}

#sliding-cards .front {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: rotateY(-35deg);
  -moz-transform: rotateY(-35deg);
  -o-transform: rotateY(-35deg);
  transform: rotateY(-35deg);
  position: absolute;
  top: 0;
  left: 0;
  background-color: #FFF;
  width: 100%;
  cursor: pointer;
  box-shadow: 10px 4px 14px rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
   z-index: -9999;
}

#sliding-cards img {
  vertical-align: middle !important;
  border-style: none;
  width: 100%;
  z-index: 2;
  position: relative;
  max-width: 100%;
  border-radius: 1px;
}

#sliding-cards .first-card {
  z-index: 6;
  position: relative;
}

#sliding-cards .second-card {
  z-index: 5;
  position: relative;
}

#sliding-cards .third-card {
  z-index: 4;
  position: relative;
}

#sliding-cards .fourth-card {
  z-index: 3;
  position: relative;
}

#spaceholder {
  margin-top: -270px;
  z-index: 7;
  position: relative;
  border-top: 1px solid rgba(231, 231, 231, 0.5);
  padding: 190px 0;
  overflow: hidden;
  background: grey;
}

 <section id="sliding-cards" class="bg-dark-red py-5">
   <div class="section-components">
     <div class="container">
     
       <div class="row"></div>
       
       <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="https://images.unsplash.com/photo-1518495973542-4542c06a5843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" 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="https://images.unsplash.com/photo-1518495973542-4542c06a5843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="" />
                 </div>
               </a>
             </div>
           </div>
         </div>
         <!-- Card #3 -->
         <div class="col-md-3">
           <div class="card-container third-card">
             <div class="card-component">
               <a href="#">
                 <div class="front">
                   <img src="https://images.unsplash.com/photo-1518495973542-4542c06a5843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="" />
                 </div>
               </a>
             </div>
           </div>
         </div>
         <!-- Card #4 -->
         <div class="col-md-3">
           <div class="card-container fourth-card">
             <div class="card-component">
               <a href="#">
                 <div class="front">
                   <img src="https://images.unsplash.com/photo-1518495973542-4542c06a5843?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="" />
                 </div>
               </a>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </section>

 <section id="spaceholder"></section>