Card by xantha01

1.card {
2  background: rgba(172, 7, 226, 0.5);
3  position: relative;
4  max-width: 250px;
5  height: 350px;
6  border-radius: 5px;
7  padding: 1rem;
8  overflow: hidden;
9  display: flex;
10  flex-direction: column;
11  justify-content: flex-end;
12  gap: 7.5px;
13  transition: 0.5s ease;
14  color: white;
15}
16
17.card::after {
18  content: "";
19  position: absolute;
20  inset: 0;
21  background: radial-gradient(
22        35.36% 35.36% at 100% 25%,
23        #0000 66%,
24        #c79013 68% 70%,
25        #0000 72%
26      )
27      32px 32px / calc(2 * 32px) calc(2 * 32px),
28    radial-gradient(
29        35.36% 35.36% at 0 75%,
30        #0000 66%,
31        #c79013 68% 70%,
32        #0000 72%
33      )
34      32px 32px / calc(2 * 32px) calc(2 * 32px),
35    radial-gradient(
36        35.36% 35.36% at 100% 25%,
37        #0000 66%,
38        #c79013 68% 70%,
39        #0000 72%
40      )
41      0 0 / calc(2 * 32px) calc(2 * 32px),
42    radial-gradient(
43        35.36% 35.36% at 0 75%,
44        #0000 66%,
45        #c79013 68% 70%,
46        #0000 72%
47      )
48      0 0 / calc(2 * 32px) calc(2 * 32px),
49    repeating-conic-gradient(#295b3f 0 25%, #0000 0 50%) 0 0 / calc(2 * 32px)
50      calc(2 * 32px),
51    radial-gradient(#0000 66%, #c79013 68% 70%, #0000 72%) 0 calc(32px / 2) /
52      32px 32px #295b3f;
53  opacity: 0.5;
54  transition: 0.3s ease;
55}
56
57.card:hover::after {
58  opacity: 0.25;
59}
60
61.cardHeader {
62  text-transform: uppercase;
63  position: relative;
64  width: max-content;
65  font-weight: bold;
66  transition: all 0.5s ease;
67}
68.cardHeader::after {
69  content: "";
70  width: calc(100% + 1rem);
71  height: 2.5px;
72  transform: translateX(calc(-100% - 1rem));
73  background: aqua;
74  bottom: -2px;
75  left: 0;
76  position: absolute;
77  opacity: 0;
78}
79
80.details {
81  z-index: 2;
82  display: flex;
83  flex-direction: column;
84  gap: 5px;
85  transform: translateY(95%);
86  transition: all 0.5s ease;
87}
88
89.button {
90  background-color: aqua;
91  color: black;
92  padding: 2.5px 5px;
93  width: max-content;
94  border-radius: 2.5px;
95}
96.card:hover .details {
97  transform: translateY(0%);
98  transition-delay: 0.5s;
99}
100.card:hover .cardHeader::after {
101  transform: translateX(-1rem);
102  transition: 0.5s ease;
103  opacity: 1;
104}
105.card:hover {
106  transform: scale(1.1);
107  border-radius: 15px;
108}
109