Card by gharsh11032000

1.card-container {
2  width: 300px;
3  height: 300px;
4  position: relative;
5  border-radius: 10px;
6  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
7  overflow: hidden;
8}
9
10.card {
11  width: 100%;
12  height: 100%;
13  border-radius: inherit;
14}
15
16.card .front-content {
17  width: 100%;
18  height: 100%;
19  display: flex;
20  align-items: center;
21  justify-content: center;
22  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
23}
24
25.card .front-content p {
26  font-size: 32px;
27  font-weight: 700;
28  opacity: 1;
29  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
30  background-clip: text;
31  -webkit-background-clip: text;
32  -webkit-text-fill-color: transparent;
33  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1)
34}
35
36.card .content {
37  position: absolute;
38  top: 0;
39  left: 0;
40  width: 100%;
41  height: 100%;
42  display: flex;
43  flex-direction: column;
44  align-items: center;
45  justify-content: center;
46  text-align: center;
47  gap: 10px;
48  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
49  color: #e8e8e8;
50  padding: 20px;
51  line-height: 1.5;
52  border-radius: 5px;
53  pointer-events: none;
54  transform: translatex(96%);
55  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
56}
57
58.card .content .heading {
59  font-size: 32px;
60  font-weight: 700;
61}
62
63.card:hover .content {
64  transform: translateY(0);
65}
66
67.card:hover .front-content {
68  transform: translateX(20%);
69}
70
71.card:hover .front-content p {
72  opacity: 0;
73}
74
75