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