Card by gharsh11032000

1.card {
2  position: relative;
3  display: flex;
4  align-items: center;
5  justify-content: center;
6  width: 320px;
7  padding: 36px;
8  border-radius: 24px;
9  overflow: hidden;
10  line-height: 1.6;
11  border: 1px solid #999999;
12  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
13}
14
15.content {
16  display: flex;
17  flex-direction: column;
18  align-items: flex-start;
19  gap: 24px;
20  color: #000000;
21  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
22}
23
24.content .heading {
25  font-weight: 700;
26  font-size: 36px;
27  line-height: 1.3;
28  z-index: 1;
29  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
30}
31
32.content .para {
33  z-index: 1;
34  opacity: 0.8;
35  font-size: 18px;
36  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
37}
38
39.card::before {
40  content: "";
41  position: absolute;
42  right: -5.2rem;
43  top: -5.2rem;
44  width: 10.4rem;
45  height: 10.4rem;
46  background: #0a3cff;
47  z-index: 0;
48  opacity: 0;
49  border-radius: 50%;
50  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
51}
52
53.card::after {
54  content: "";
55  position: absolute;
56  left: -5.2rem;
57  bottom: -5.2rem;
58  width: 10.4rem;
59  height: 10.4rem;
60  background: #0a3cff;
61  z-index: 0;
62  opacity: 0;
63  border-radius: 50%;
64  transition: all 0.48s cubic-bezier(0.23, 1, 0.32, 1);
65}
66
67.card:hover::before {
68  scale: 7;
69  opacity: 1;
70}
71
72.card:hover::after {
73  scale: 7;
74  opacity: 1;
75}
76
77.card:hover .content .heading {
78  color: #ffffff;
79}
80
81.card:hover .content .para {
82  color: #ffffff;
83}
84
85.card:hover {
86  box-shadow: 0rem 6px 13px rgba(0, 0, 0, 0.1),
87    0rem 24px 24px rgba(0, 0, 0, 0.09), 0rem 55px 33px rgba(0, 0, 0, 0.05),
88    0rem 97px 39px rgba(0, 0, 0, 0.01), 0rem 152px 43px rgba(0, 0, 0, 0);
89  border-color: #0a3cff;
90  scale: 1.05;
91}
92