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}
