Card by ElSombrero2

1.card {
2  overflow: visible;
3  width: 190px;
4  height: 254px;
5}
6
7.content {
8  width: 100%;
9  height: 100%;
10  transform-style: preserve-3d;
11  transition: transform 300ms;
12  box-shadow: 0px 0px 10px 1px #000000ee;
13  border-radius: 5px;
14}
15
16.front, .back {
17  background-color: #151515;
18  position: absolute;
19  width: 100%;
20  height: 100%;
21  backface-visibility: hidden;
22  -webkit-backface-visibility: hidden;
23  border-radius: 5px;
24  overflow: hidden;
25}
26
27.back {
28  width: 100%;
29  height: 100%;
30  justify-content: center;
31  display: flex;
32  align-items: center;
33  overflow: hidden;
34}
35
36.back::before {
37  position: absolute;
38  content: ' ';
39  display: block;
40  width: 160px;
41  height: 160%;
42  background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent);
43  animation: rotation_481 5000ms infinite linear;
44}
45
46.back-content {
47  position: absolute;
48  width: 99%;
49  height: 99%;
50  background-color: #151515;
51  border-radius: 5px;
52  color: white;
53  display: flex;
54  flex-direction: column;
55  justify-content: center;
56  align-items: center;
57  gap: 30px;
58}
59
60.card:hover .content {
61  transform: rotateY(180deg);
62}
63
64@keyframes rotation_481 {
65  0% {
66    transform: rotateZ(0deg);
67  }
68
69  0% {
70    transform: rotateZ(360deg);
71  }
72}
73
74.front {
75  transform: rotateY(180deg);
76  color: white;
77}
78
79.front .front-content {
80  position: absolute;
81  width: 100%;
82  height: 100%;
83  padding: 10px;
84  display: flex;
85  flex-direction: column;
86  justify-content: space-between;
87}
88
89.front-content .badge {
90  background-color: #00000055;
91  padding: 2px 10px;
92  border-radius: 10px;
93  backdrop-filter: blur(2px);
94  width: fit-content;
95}
96
97.description {
98  box-shadow: 0px 0px 10px 5px #00000088;
99  width: 100%;
100  padding: 10px;
101  background-color: #00000099;
102  backdrop-filter: blur(5px);
103  border-radius: 5px;
104}
105
106.title {
107  font-size: 11px;
108  max-width: 100%;
109  display: flex;
110  justify-content: space-between;
111}
112
113.title p {
114  width: 50%;
115}
116
117.card-footer {
118  color: #ffffff88;
119  margin-top: 5px;
120  font-size: 8px;
121}
122
123.front .img {
124  position: absolute;
125  width: 100%;
126  height: 100%;
127  object-fit: cover;
128  object-position: center;
129}
130
131.circle {
132  width: 90px;
133  height: 90px;
134  border-radius: 50%;
135  background-color: #ffbb66;
136  position: relative;
137  filter: blur(15px);
138  animation: floating 2600ms infinite linear;
139}
140
141#bottom {
142  background-color: #ff8866;
143  left: 50px;
144  top: 0px;
145  width: 150px;
146  height: 150px;
147  animation-delay: -800ms;
148}
149
150#right {
151  background-color: #ff2233;
152  left: 160px;
153  top: -80px;
154  width: 30px;
155  height: 30px;
156  animation-delay: -1800ms;
157}
158
159@keyframes floating {
160  0% {
161    transform: translateY(0px);
162  }
163
164  50% {
165    transform: translateY(10px);
166  }
167
168  100% {
169    transform: translateY(0px);
170  }
171}