overflow hidden pour card flip

Bonjour, Bonsoir, Messieurs, Mesdames,

j'ai un petit souci pour masquer le restant des cartes flip.

En fait, je voudrais masquer les cards du 11e au 20e.

Voici le

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="cardFlip.css">
    <title>test card</title>
</head>
 
<body>
    <div class="perso">
        <h1>test Card</h1>
    </div>
    <div class="tabs-content">
        <div class="cardFlip" id="miniProject03_CardFlip">
 
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <div class="card">
                <div class="front"></div>
                <div class="back"></div>
            </div>
        </div>
    </div>
 
</body>
 
</html>

Voici mon code CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    font-family: sans-serif;
    background-color: #34495e;
    color: #fff;
}
 
.perso {
    text-align: center;
    margin-bottom: 5%;
}
 
.tabs-content {
    width: 80%;
    height: 100%;
    margin: 2rem auto;
    box-shadow: 0 0 30px #c81313b3;
}
 
.cardFlip {
    width: 100%;
    height: 600px;
    margin: 2rem auto;
    background-color: #e8b2e8;
    opacity: 0.7;
    counter-reset: step;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    padding-top: 3%;
    overflow-y: scroll;
}
.card {
    margin: 20px 0;
    background-color: lawngreen;
    width: 200px;
    height: 250px;
    overflow: hidden;
}
 
.front::after {
    counter-increment: step;
    content: counter(step);
    color: red;
    font-size: 2.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
 
.front, .back {
    position: absolute;
    width: 200px;
    height: 250px;
    -webkit-transform: perspective(600px);
    transform: perspective(600px);
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: transform 0.5s linear 0s;
    transition: transform 0.5s linear 0s;
}
.back {
    transform: rotateY(-180deg);
}
.back a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.front {
    transform: rotateY(0deg);
    background-color: #4dd;
}
 
.card:hover > .back {
    -webkit-transform: perspective(600px) rotateY(0deg);
    transform: perspective(600px) rotateY(0deg);
}
.card:hover > .front {
    -webkit-transform: perspective(600px) rotateY(180deg);
    transform: perspective(600px) rotateY(180deg);
}

Voici mon probleme en image :
Pièce jointe 558627
Pièce jointe 558628

Comme je l'ai dit au debut de mon message, je voudrais masquer les card 11e au 20e et qu'avec le overflow-y scroll du container on puisse voir les cards 11e au 20e