docs/static/css/image_card_fader.css

.d-flex {
    display: flex;
}
  
.justify-content-center {
justify-content: center;
}
  
.flip-card-container {
margin: 0 5px;
}
  
.flip-card {
perspective: 1000px;
}
  
.flip-card-inner {
    position: relative;
    width: 1000px;
    height: 215px;
    text-align: center;
    transition: transform 1.5s;
    transform-style: preserve-3d;
}
  

.out{
    opacity: 0;
    transition: opacity 1s;
}

.in{
    opacity: 1;
    transition: opacity 1s;
}

/* .flipped .flip-card-inner {
    opacity: 0;
} */
  
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
  
.flip-card-front {
    color: black;
    z-index: 2;
}
  
  .flip-card-back {
    /* transform: rotateY(180deg); */
    z-index: 1;
  }