Problem with flippable card triggered when hovering

Question

I'm having troubles with three flippable hover cards. The cards seems to do most of the work, however it seems like the content in the li disappears/fade away upon refreshing, loading the page even though the border of the li does not disappear in the front side of the card itself. While the heading of the card stays visible all the time.

The problem is very obvious when you try (re)loading the page. Whenever you refresh the page you can clearly see the content of the page disappear in the front-side of the card. While the background image and heading of the card stay intact

I think the content gets lost through the transition of the card itself.

I pretty much tried every property concerning transform and transition. At least I think it has to do with a transform or transition because you see the content fade away on refreshing the page. Weird thing is the header and the background image in the card stay intact and do their job.

Here is my codepen so it's easier to see the problem: https://codepen.io/MaxVervaeke/pen/LvjzVO

HTML

            <div class="tour-card">
                <div class="card__side card__side--front">
                    <div class="card__picture picture-one">&nbsp;</div>
                    <h4 class="card__heading">
                        <span class="card__heading--span card__heading--span-one">The sea <br> explorer</span>
                    </h4>
                    <div class="card__details">
                        <ul>
                            <li>3 day tours</li>
                            <li>Up to 20 people</li>
                            <li>2 tour guides</li>
                            <li>Sleep in cozy hotels</li>
                            <li>Difficulty: very easy</li>
                        </ul>
                    </div>
                </div>
                <div class="card__side card__side--back card__side--back-one">
                    BACKSIDE
                </div>
            </div>

            <div class="tour-card">
                <div class="card__side card__side--front">
                    <div class="card__picture picture-two">&nbsp;</div>
                    <h4 class="card__heading">
                        <span class="card__heading--span card__heading--span-two">The forest <br> hiker</span>
                    </h4>
                    <div class="card__details">
                        <ul>
                            <li>5 day tours</li>
                            <li>Up to 10 people</li>
                            <li>6 tour guides</li>
                            <li>Sleep in snuggy hotels</li>
                            <li>Difficulty: medium</li>
                        </ul>
                    </div>
                </div>
                <div class="card__side card__side--back card__side--back-two">
                    BACKSIDE
                </div>
            </div>

            <div class="tour-card">
                <div class="card__side card__side--front">
                        <div class="card__picture picture-three">&nbsp;</div>
                        <h4 class="card__heading">
                            <span class="card__heading--span card__heading--span-three">The snow <br> adventurer</span>
                        </h4>
                        <div class="card__details">
                            <ul>
                                <li>7 day tours</li>
                                <li>Up to 5 people</li>
                                <li>3 tour guides</li>
                                <li>Sleep in provided hotels</li>
                                <li>Difficulty: hard</li>
                            </ul>
                        </div>
                </div>
                <div class="card__side card__side--back card__side--back-three">
                    BACKSIDE
                </div>
            </div>

CSS

.tour-grid {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 2rem;
padding: 0 5rem;}

.tour-card {
position: relative;
height:700px;
-webkit-perspective: 90rem;
perspective: 90rem;
width:100%;
}

.card__side {
color: #fff;
font-size:1.5rem;
height:700px;
border-radius: 3px;
box-shadow: 0 1rem 2rem rgba(0,0,0,.15);
transition: all 1s ease;
overflow:hidden;
backface-visibility: hidden; 
}


.tour-card:hover .card__side--front {
transform: rotateY(-180deg);
}

.tour-card:hover .card__side--back {
transform: rotateY(0deg);
}


.card__side--front{
background-color: #FFF;
position:relative;
}

.card__picture {
height:15rem;
background-blend-mode: screen;
-webkit-clip-path:polygon(0 0, 100% 0, 100% 85%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
background-size: cover;
}

.picture-one {
background-image: linear-gradient(to right bottom,rgba(255,185,0,1.000),rgba(255,119,48,1.000)), url(../images/trees-sm.jpg);
}

.picture-two {
background-image: linear-gradient(to right bottom,rgba(126,213,11,.7),rgba(40,180,131,.7)),url(../images/lake-bench-sm.jpg);
}

.picture-three {
background-image: linear-gradient(to right bottom,rgba(41,152,255,1.000),rgba(85,67,250,1.000)),url(../images/snowy-route-sm_640.jpg);}


.card__heading {
font-size: 1.5rem;
font-weight:300;
text-transform: uppercase;
text-align: right;
color:#FFF;
position: absolute;
top:30%;
left:60%;
}

.card__heading--span{
padding: .6rem 1rem;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

.card__heading--span-one{background-image: linear-gradient(to right bottom, rgba(255,185,0,.85),rgba(255,119,48,.85))}
.card__heading--span-two{background-image: linear-gradient(to right bottom,rgba(126,213,11,.85),rgba(40,180,131,.85));}
.card__heading--span-three{background-image:linear-gradient(to right bottom,rgba(41,152,255,.85),rgba(85,67,250,.85));}


.card__details ul {
list-style: none;
width:80%;
margin: 0 auto;
}
.card__details ul li {
text-align:center;
font-size: .8rem;
margin: 4rem 0 1rem 0;
border-bottom: 1px solid #777;
}

.card__side--back{
    transform: rotateY(180deg);
    position: absolute;
    top:0;
    left:0;
    width:100%;
}

Expected result: I have the content between the li tags to become visible on the font-side of the page, while right now it disappears/fades away after refreshing the page

Answer 1

Perhaps I'm not getting the problem, but the li's inherit color: #fff from .card__side. Just add the following to see the text in the list items.

.card__details {
  color: #111;
}

Nice design, and CSS code, by the way, but don't use transition: all if you want to think about performance.