1.card {
2 --bg: #f7f7f8;
3 --hover-bg: #FFE5F4;
4 --hover-text: #E50087;
5 max-width: 23ch;
6 text-align: center;
7 background: var(--bg);
8 padding: 1.5em;
9 padding-block: 1.8em;
10 border-radius: 5px;
11 position: relative;
12 overflow: hidden;
13 transition: .3s cubic-bezier(.6,.4,0,1),transform .15s ease;
14 display: flex;
15 flex-direction: column;
16 justify-content: center;
17 align-items: center;
18 gap: 1em;
19}
20
21.card__body {
22 color: #464853;
23 line-height: 1.5em;
24 font-size: 1em;
25}
26
27.card > :not(span) {
28 transition: .3s cubic-bezier(.6,.4,0,1);
29}
30
31.card > strong {
32 display: block;
33 font-size: 1.4rem;
34 letter-spacing: -.035em;
35}
36
37.card span {
38 position: absolute;
39 inset: 0;
40 width: 100%;
41 height: 100%;
42 display: flex;
43 justify-content: center;
44 align-items: center;
45 color: var(--hover-text);
46 border-radius: 5px;
47 font-weight: bold;
48 top: 100%;
49 transition: all .3s cubic-bezier(.6,.4,0,1);
50}
51
52.card:hover span {
53 top: 0;
54 font-size: 1.2em;
55}
56
57.card:hover {
58 background: var(--hover-bg);
59}
60
61.card:hover>div,.card:hover>strong {
62 opacity: 0;
63}
