Card by gharsh11032000

1.card {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  width: 320px;
7  border-radius: 24px;
8  line-height: 1.6;
9  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
10}
11
12.content {
13  display: flex;
14  flex-direction: column;
15  align-items: flex-start;
16  gap: 24px;
17  padding: 36px;
18  border-radius: 22px;
19  color: #ffffff;
20  overflow: hidden;
21  background: #0a3cff;
22  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
23}
24
25.content::before {
26  position: absolute;
27  content: "";
28  top: -4%;
29  left: 50%;
30  width: 90%;
31  height: 90%;
32  transform: translate(-50%);
33  background: #ced8ff;
34  z-index: -1;
35  transform-origin: bottom;
36
37  border-radius: inherit;
38  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
39}
40
41.content::after {
42  position: absolute;
43  content: "";
44  top: -8%;
45  left: 50%;
46  width: 80%;
47  height: 80%;
48  transform: translate(-50%);
49  background: #e7ecff;
50  z-index: -2;
51  transform-origin: bottom;
52  border-radius: inherit;
53  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
54}
55
56.content svg {
57  width: 48px;
58  height: 48px;
59}
60
61.content .para {
62  z-index: 1;
63  opacity: 1;
64  font-size: 18px;
65  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
66}
67
68.content .link {
69  z-index: 1;
70  color: #fea000;
71  text-decoration: none;
72  font-family: inherit;
73  font-size: 16px;
74  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
75}
76
77.content .link:hover {
78  text-decoration: underline;
79}
80
81.card:hover {
82  transform: translate(0px, -16px);
83}
84
85.card:hover .content::before {
86  rotate: -8deg;
87  top: 0;
88  width: 100%;
89  height: 100%;
90}
91
92.card:hover .content::after {
93  rotate: 8deg;
94  top: 0;
95  width: 100%;
96  height: 100%;
97}
98