1.box {
2 position: relative;
3 width: 220px;
4 height: 300px;
5 display: flex;
6 justify-content: center;
7 align-items: center;
8 transition: 0.5s;
9 z-index: 1;
10}
11
12.box::before {
13 content: ' ';
14 position: absolute;
15 top: 0;
16 left: 50px;
17 width: 50%;
18 height: 100%;
19 text-decoration: none;
20 background: #fff;
21 border-radius: 8px;
22 transform: skewX(15deg);
23 transition: 0.5s;
24}
25
26.box::after {
27 content: '';
28 position: absolute;
29 top: 0;
30 left: 50;
31 width: 50%;
32 height: 100%;
33 background: #fff;
34 border-radius: 8px;
35 transform: skewX(15deg);
36 transition: 0.5s;
37 filter: blur(30px);
38}
39
40.box:hover:before,
41.box:hover:after {
42 transform: skewX(0deg) scaleX(1.3);
43}
44
45.box:before,
46.box:after {
47 background: linear-gradient(315deg, #ffbc00, #ff0058)
48}
49
50.box span {
51 display: block;
52 position: absolute;
53 top: 0;
54 left: 0;
55 right: 0;
56 bottom: 0;
57 z-index: 5;
58 pointer-events: none;
59}
60
61.box span::before {
62 content: '';
63 position: absolute;
64 top: 0;
65 left: 0;
66 width: 0;
67 height: 0;
68 border-radius: 8px;
69 background: rgba(255, 255, 255, 0.1);
70 backdrop-filter: blur(10px);
71 opacity: 0;
72 transition: 0.1s;
73 animation: animate 2s ease-in-out infinite;
74 box-shadow: 0 5px 15px rgba(0,0,0,0.08)
75}
76
77.box span::before {
78 top: -40px;
79 left: 40px;
80 width: 50px;
81 height: 50px;
82 opacity: 1;
83}
84
85.box span::after {
86 content: '';
87 position: absolute;
88 bottom: 0;
89 right: 0;
90 width: 100%;
91 height: 100%;
92 border-radius: 8px;
93 background: rgba(255, 255, 255, 0.1);
94 backdrop-filter: blur(10px);
95 opacity: 0;
96 transition: 0.5s;
97 box-shadow: 0 5px 15px rgba(0,0,0,0.08);
98 animation-delay: -1s;
99}
100
101.box span:after {
102 bottom: -40px;
103 right: 40px;
104 width: 50px;
105 height: 50px;
106 opacity: 1;
107}
108
109.box .content {
110 position: relative;
111 width: 190px;
112 height: 254px;
113 padding: 20px 40px;
114 background: rgba(255, 255, 255, 0.05);
115 backdrop-filter: blur(10px);
116 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
117 border-radius: 8px;
118 z-index: 1;
119 transform: 0.5s;
120 color: #fff;
121 display: flex;
122 justify-content: center;
123 align-items: center;
124}
125
126.box .content h2 {
127 font-size: 20px;
128 color: #fff;
129 margin-bottom: 10px;
130}