Card by milegelu

1.card {
2  --card-width: 20em;
3  --primer-color: hsl(241, 100%, 70%);
4  --text-color: hsl(0, 0%, 100%);
5  --text-color-L2: hsl(0, 0%, 60%);
6  --transition: all 0.2s cubic-bezier(0.13, 0.78, 0.3, 0.99);
7  background: hsl(0, 0%, 10%);
8
9  font-size: 12px;
10  line-height: 2;
11
12  border-radius: 1em;
13  padding-bottom: 0.5em;
14  z-index: 20;
15  overflow: hidden;
16  display: flex;
17  flex-direction: column;
18
19  transition: all 0.2s ease-in;
20}
21.detial {
22  width: var(--card-width);
23  padding: 01em 1em;
24  color: var(--text-color);
25  transition: all 0.2s ease-in;
26
27  z-index: 1;
28}
29.name {
30  font-size: 2em;
31  font-weight: bold;
32}
33
34.title {
35  display: flex;
36  align-items: center;
37  justify-content: space-between;
38  margin: 0.5em 0;
39}
40
41.content {
42  color: var(--text-color);
43  width: var(--card-width);
44  position: absolute;
45  transform: rotate3D(0.4, 1, 0.4, 0deg) scale(0.4);
46  padding: 2em;
47  opacity: 0;
48  height: 20em;
49  overflow: hidden;
50}
51
52.thumb {
53  width: var(--card-width);
54  height: 20em;
55  overflow: hidden;
56  transition: var(--transition);
57
58  z-index: 0;
59  display: flex;
60  justify-content: center;
61  align-items: center;
62}
63.thumb svg {
64  transform: scale(7);
65  color: hsla(0, 0%, 100%, 0.2);
66}
67
68.card:hover {
69  background-color: hsl(0, 0%, 15%);
70  box-shadow: 0px 20px 40px hsl(40, 60%, 0%, 0.4),
71    inset 1px 2px 4px rgba(255, 255, 255, 0.1);
72  transform: scale(1.1);
73}
74.card:hover .detial {
75  padding: 1em 2em;
76}
77
78.card:hover .thumb {
79  opacity: 0.2;
80  filter: blur(20px);
81  transform: scale(1.5);
82}
83.card:hover .content {
84  transform: none;
85  opacity: 1;
86  transition: var(--transition);
87}
88
89.infomation {
90  display: flex;
91  align-items: center;
92  justify-content: space-between;
93}
94.propertion {
95  font-size: 0.8em;
96  color: var(--text-color-L2);
97}
98
99.action {
100  display: flex;
101  align-items: center;
102  justify-content: space-between;
103  height: 3em;
104  padding: 0 0.5em;
105  border-radius: 1em;
106  border: 1px solid transparent;
107  transition: var(--transition);
108}
109.action:hover {
110  box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.6),
111    inset 0.5px 1px 2px rgba(255, 255, 255, 0.1);
112  background: hsla(0, 0%, 50%, 0.1);
113}
114
115.mode {
116  color: var(--text-color-L2);
117  padding: 0.4em;
118  width: 2em;
119  height: 2em;
120  border-radius: 0.5em;
121  transition: var(--transition);
122}
123.mode:hover {
124  color: var(--text-color);
125  background: hsla(0, 0%, 50%, 0.15);
126  transform: scale(1.2);
127  box-shadow: 2px 4px 16px hsla(0, 0%, 100%, 0.1);
128}
129.mode:active {
130  background: hsla(0, 0%, 50%, 0.3);
131  transform: scale(1);
132}
133.mode.hide {
134  opacity: 0;
135  transition: var(--transition);
136}
137.action:hover .mode.hide {
138  opacity: 1;
139}
140
141.level {
142  color: rgb(230, 204, 89);
143}
144