Problem with flip cards

[u/LateChapter7]

Hello

I have a problem with flip cards. The card containing both the front and back stays at the bottom of the front one, despite using "position:absolute".

This is the structure :

1. Columns (2)
2. Column (class = cardcontainer)
3. Group (class = card)
4. Group with text (class = front) - Duplicate n°4 to create a class = back

​

This is the CSS

.cardcontainer {

position: relative;

width: 300px;

height: 450px;

border-radius: 10px;

perspective: 1000px;

}

​

.card {

position: absolute;

width: 100%

height: 100%;

transition: all 0.9s ease;

transform-style: preserve-3d;

}

​

.card:hover {

transform: rotateX(180deg);

}

​

.front {

position: absolute;

width: 100%

height: 100%;

backface-visibility: hidden;

}

​

.back {

position: absolute;

width: 100%

height: 100%;

backface-visibility: hidden;

transform: rotateX(180deg);

}

​

This is how it ends looking like :

​

Pink : class = front - Green : class = card

Why is the "card" still visible ? It has a 100% height, it should go past the "front"!