HTML-Projects/Card Hover Animation.html at main · MeninjoDoRio/HTML-Projects · GitHub

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<style>
    * {
        box-sizing: border-box;
        margin: unset;
        padding: unset;
        color: inherit;
    }

    html {
        font-family: monospace;
        font-size: max(5vmin, 16px);
    }

    body {
        display: flex;
        min-height: 100vh;
        align-items: center;
        justify-content: center;
        background-color: hsl(240deg, 10%, 10%);
        color: hsl(240deg, 10%, 90%);
    }

    body:hover .hand {
        grid-template-columns: repeat(5, 16vmin);
        gap: 2vmin;
    }

body:hover .card:hover {
    transform: rotate(calc((var(--i) * 15deg) - 30deg)) translateY(-20%);
    transform-origin: 50% 100%;
    z-index: 10;
}

    .hand {
        display: inline-grid;
        grid-template-columns: repeat(5, 0);
        gap: 0;
        transition: 200ms ease-in-out;
    }

    .card {
        position: relative;
        height: 20vmin;
        width: 16vmin;
        transform: rotate(calc((var(--i) * 15deg) - 30deg)) translateY(0);
        transform-origin: 50% 100%;
        border-radius: 1vmin;
        border: 1px solid currentColor;
        background-color: white;
        transition: transform 200ms ease-in-out;
        overflow: hidden;
    }

    .card span.name {
        position: absolute;
        top: 0.5vmin;
        left: 0.7vmin;
        font-size: 2vmin;
        line-height: 1;
        color: black;
    }

    .card span.symbol {
        position: absolute;
        bottom: 0.5vmin;
        right: 0.7vmin;
        font-size: 2.5vmin;
        line-height: 1;
    }

    .card span.center-symbol {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 8vmin;
        opacity: 1;
        pointer-events: none;
    }

    /* Hide center-symbol for the Two card */
    .card.two span.center-symbol {
        display: none;
    }

    /* Two symbols vertical stack in the center */
    .center-symbols.two {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 10vmin;
        font-size: 3.5vmin;
        pointer-events: none;
        color: #b22222;
    }

    .center-symbols.two span {
        display: block;
        line-height: 1;
    }

    .red {
        color: #b22222;
    }

    .black {
        color: #222222;
    }
</style>

<div class="hand">
    <div class="card" style="--i: 0;">
        <span class="name">King</span>
        <span class="symbol black">♠</span>
        <span class="center-symbol black">♠</span>
    </div>
    <div class="card" style="--i: 1;">
        <span class="name">Queen</span>
        <span class="symbol red">♥</span>
        <span class="center-symbol red">♥</span>
    </div>
    <div class="card" style="--i: 2;">
        <span class="name">Jack</span>
        <span class="symbol black">♣</span>
        <span class="center-symbol black">♣</span>
    </div>
    <div class="card two" style="--i: 3;">
        <span class="name">Two</span>
        <span class="symbol red">♦</span>
        <span class="center-symbol red">♦</span> <!-- hidden by CSS -->
        <div class="center-symbols two red">
            <span>♦</span>
            <span>♦</span>
        </div>
    </div>
    <div class="card" style="--i: 4;">
        <span class="name">Ace</span>
        <span class="symbol black">♠</span>
        <span class="center-symbol black">♠</span>
    </div>
</div>