overflow hidden pour card flip

**Shadow750** · 21/04/2020, 10h53

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :
Nom : CaptureTestCardFlip01.JPG
Affichages : 89
Taille : 57,3 Ko

Nom : CaptureTestCardFlip02.JPG
Affichages : 94
Taille : 66,3 Ko

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

Invité · 21/04/2020, 11h38

Bonjour,

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.cardFlip {
  position:relative;
...

**Shadow750** · 22/04/2020, 03h13

Merci beaucoup jreaux62

ça marche les cards du 11e au 20e sont maintenant inclus dans le overflow-y scroll

overflow hidden pour card flip

CSS

Vue hybride

Discussions similaires

Partager

Partager