Card by D3OXY

1.card {
2  position: relative;
3  width: 350px;
4  aspect-ratio: 16/9;
5  background-color: #f2f2f2;
6  border-radius: 10px;
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  overflow: hidden;
11  perspective: 1000px;
12  box-shadow: 0 0 0 5px #ffffff80;
13  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
14}
15
16.card svg {
17  width: 48px;
18  fill: #333;
19  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
20}
21
22.card__image {
23  width: 100%;
24  height: 100%;
25}
26
27.card:hover {
28  transform: scale(1.05);
29  box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
30}
31
32.card__content {
33  position: absolute;
34  top: 0;
35  left: 0;
36  width: 100%;
37  height: 100%;
38  padding: 20px;
39  box-sizing: border-box;
40  background-color: #f2f2f2;
41  transform: rotateX(-90deg);
42  transform-origin: bottom;
43  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
44}
45
46.card:hover .card__content {
47  transform: rotateX(0deg);
48}
49
50.card__title {
51  margin: 0;
52  font-size: 20px;
53  color: #333;
54  font-weight: 700;
55}
56
57.card:hover svg {
58  scale: 0;
59}
60
61.card__description {
62  margin: 10px 0 10px;
63  font-size: 12px;
64  color: #777;
65  line-height: 1.4;
66}
67
68.card__button {
69  padding: 15px;
70  border-radius: 8px;
71  background: #777;
72  border: none;
73  color: white;
74}
75
76.secondary {
77  background: transparent;
78  color: #777;
79  border: 1px solid #777;
80}
81