Card by marcelodolza

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