1.card {
2  width: 190px;
3  height: 254px;
4  background: #171717;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  box-shadow: 0px 0px 3px 1px #00000088;
9  cursor: pointer;
10}
11
12.card .content {
13  border-radius: 5px;
14  background: #171717;
15  width: 186px;
16  height: 250px;
17  z-index: 1;
18  padding: 20px;
19  color: white;
20  display: flex;
21  justify-content: center;
22  align-items: center;
23}
24
25.content::before {
26  opacity: 0;
27  transition: opacity 300ms;
28  content: ' ';
29  display: block;
30  background: white;
31  width: 50px;
32  height: 50px;
33  position: absolute;
34  filter: blur(50px);
35}
36
37.card:hover .content::before {
38  opacity: 1;
39}
40
41.card::before {
42  opacity: 0;
43  content: ' ';
44  position: absolute;
45  display: block;
46  width: 120px;
47  height: 360px;
48  background: linear-gradient(90deg, transparent, #ff2288, #387EF0, transparent);
49  transition: opacity 300ms;
50  animation: rotation_9018 3000ms infinite linear;
51  animation-play-state: paused;
52}
53
54.card:hover::before {
55  opacity: 1;
56  animation-play-state: running;
57}
58
59.card::after {
60  position: absolute;
61  content: ' ';
62  display: block;
63  width: 190px;
64  height: 254px;
65  background: #17171733;
66  backdrop-filter: blur(50px);
67}
68
69@keyframes rotation_9018 {
70  0% {
71    transform: rotate(0deg);
72  }
73
74  100% {
75    transform: rotate(360deg);
76  }
77}