1.card {
2  position: relative;
3  width: 200px;
4  height: 200px;
5  background: lightgrey;
6  border-radius: 30px;
7  overflow: hidden;
8  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
9  transition: all 1s ease-in-out;
10  border: 2px solid rgb(255, 255, 255);
11}
12
13.background {
14  position: absolute;
15  inset: 0;
16  background-color: #4158D0;
17  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
18}
19
20.logo {
21  position: absolute;
22  right: 50%;
23  bottom: 50%;
24  transform: translate(50%, 50%);
25  transition: all 0.6s ease-in-out;
26  font-size: 1.3em;
27  font-weight: 600;
28  color: #ffffff;
29  letter-spacing: 3px;
30}
31
32.logo .logo-svg {
33  fill: white;
34  width: 30px;
35  height: 30px;
36}
37
38.icon {
39  display: inline-block;
40  width: 20px;
41  height: 20px;
42}
43
44.icon .svg {
45  fill: rgba(255, 255, 255, 0.797);
46  width: 100%;
47  transition: all 0.5s ease-in-out;
48}
49
50.box {
51  position: absolute;
52  padding: 10px;
53  text-align: right;
54  background: rgba(255, 255, 255, 0.389);
55  border-top: 2px solid rgb(255, 255, 255);
56  border-right: 1px solid white;
57  border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
58  box-shadow: rgba(100, 100, 111, 0.364) -7px 7px 29px 0px;
59  transform-origin: bottom left;
60  transition: all 1s ease-in-out;
61}
62
63.box::before {
64  content: "";
65  position: absolute;
66  inset: 0;
67  border-radius: inherit;
68  opacity: 0;
69  transition: all 0.5s ease-in-out;
70}
71
72.box:hover .svg {
73  fill: white;
74}
75
76.box1 {
77  width: 70%;
78  height: 70%;
79  bottom: -70%;
80  left: -70%;
81}
82
83.box1::before {
84  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #ff53d4 60%, #62c2fe 90%);
85}
86
87.box1:hover::before {
88  opacity: 1;
89}
90
91.box1:hover .icon .svg {
92  filter: drop-shadow(0 0 5px white);
93}
94
95.box2 {
96  width: 50%;
97  height: 50%;
98  bottom: -50%;
99  left: -50%;
100  transition-delay: 0.2s;
101}
102
103.box2::before {
104  background: radial-gradient(circle at 30% 107%, #91e9ff 0%, #00ACEE 90%);
105}
106
107.box2:hover::before {
108  opacity: 1;
109}
110
111.box2:hover .icon .svg {
112  filter: drop-shadow(0 0 5px white);
113}
114
115.box3 {
116  width: 30%;
117  height: 30%;
118  bottom: -30%;
119  left: -30%;
120  transition-delay: 0.4s;
121}
122
123.box3::before {
124  background: radial-gradient(circle at 30% 107%, #969fff 0%, #b349ff 90%);
125}
126
127.box3:hover::before {
128  opacity: 1;
129}
130
131.box3:hover .icon .svg {
132  filter: drop-shadow(0 0 5px white);
133}
134
135.box4 {
136  width: 10%;
137  height: 10%;
138  bottom: -10%;
139  left: -10%;
140  transition-delay: 0.6s;
141}
142
143.card:hover {
144  transform: scale(1.1);
145}
146
147.card:hover .box {
148  bottom: -1px;
149  left: -1px;
150}
151
152.card:hover .logo {
153  transform: translate(70px, -52px);
154  letter-spacing: 0px;
155}