Card by KhoroshN

#e8e8e8

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

.card {
  position: relative;
  width: 60%;
  height: 60%;
  background: lightgrey;
  border-radius: 1.6em;
  overflow: hidden;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 0.8em 3em 0px;
  transition: all 1s ease-in-out;
  user-select: none;
}

.background {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 100% 107%,
    #ff89cc 0%,
    #9cb8ec 30%,
    #00ffee 60%,
    #62c2fe 100%
  );
}

.logo {
  position: absolute;
  right: 50%;
  bottom: 50%;
  transform: translate(50%, 50%);
  transition: all 0.6s ease-in-out;
}

.logo .logo-svg {
  fill: #212121;
  width: 3em;
  height: 3em;
}

.icon {
  display: inline-block;
  width: 2em;
  height: 2em;
}

.icon .svg {
  fill: rgba(255, 255, 255, 0.797);
  width: 100hw;
  transition: all 0.5s ease-in-out;
}

.box {
  position: absolute;
  padding: 1em;
  text-align: right;
  background: rgba(255, 255, 255, 0.389);
  border-top: 0.2em solid rgb(255, 255, 255);
  border-right: 0.1em solid white;
  border-radius: 10% 13% 42% 0%/10% 12% 75% 0%;
  box-shadow: rgba(100, 100, 111, 0.364) -0.8em 0.8em 3em 0px;
  transform-origin: bottom left;
  transition: all 1s ease-in-out;
}

.box::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.box:hover .svg {
  fill: white;
}

.box1 {
  width: 70%;
  height: 70%;
  bottom: -70%;
  left: -70%;
}

.box1::before {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #ff53d4 60%,
    #62c2fe 90%
  );
}

.box1:hover::before {
  opacity: 1;
}

.box1:hover .icon .svg {
  filter: drop-shadow(0 0 0.5em white);
}

.box2 {
  width: 50%;
  height: 50%;
  bottom: -50%;
  left: -50%;
  transition-delay: 0.2s;
}

.box2::before {
  background: radial-gradient(circle at 30% 107%, #91e9ff 0%, #00acee 90%);
}

.box2:hover::before {
  opacity: 1;
}

.box2:hover .icon .svg {
  filter: drop-shadow(0 0 0.5em white);
}

.box3 {
  width: 30%;
  height: 30%;
  bottom: -30%;
  left: -30%;
  transition-delay: 0.4s;
}

.box3::before {
  background: radial-gradient(circle at 30% 107%, #969fff 0%, #b349ff 90%);
}

.box3:hover::before {
  opacity: 1;
}

.box3:hover .icon .svg {
  filter: drop-shadow(0 0 0.5em white);
}

.box4 {
  width: 10%;
  height: 10%;
  bottom: -10%;
  left: -10%;
  transition-delay: 0.6s;
}

.card:hover {
  transform: scale(1.1);
}

.card:hover .box {
  bottom: -0.1em;
  left: -0.1em;
}

.card:hover .logo {
  transform: translate(0, 0);
  bottom: 2em;
  right: 2em;
}

Toggle prefixes

254 views

Variation of acard

Copy to Figma

254 views

Variation of acard

Comments

MIT License

Copyright - 2024 Smit-Prajapati (Smit Prajapati) 
Copyright - 2024 KhoroshN  

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.