Card by gharsh11032000

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