Card by qhns3

1.card {
2  position: relative;
3  width: 190px;
4  height: 254px;
5  background-color: #000;
6  display: flex;
7  flex-direction: column;
8  justify-content: end;
9  padding: 12px;
10  gap: 12px;
11  border-radius: 8px;
12  cursor: pointer;
13}
14
15.card::before {
16  content: "";
17  position: absolute;
18  inset: 0;
19  left: -5px;
20  margin: auto;
21  width: 200px;
22  height: 264px;
23  border-radius: 10px;
24  background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100%);
25  z-index: -10;
26  pointer-events: none;
27  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
28}
29
30.card::after {
31  content: "";
32  z-index: -1;
33  position: absolute;
34  inset: 0;
35  background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100%);
36  transform: translate3d(0, 0, 0) scale(0.95);
37  filter: blur(20px);
38}
39
40.heading {
41  font-size: 20px;
42  text-transform: capitalize;
43  font-weight: 700;
44}
45
46.card p:not(.heading) {
47  font-size: 14px;
48}
49
50.card p:last-child {
51  color: #e81cff;
52  font-weight: 600;
53}
54
55.card:hover::after {
56  filter: blur(30px);
57}
58
59.card:hover::before {
60  transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
61}
62