1.card {
2  position: relative;
3  width: 300px;
4  height: 200px;
5  background: linear-gradient(-45deg, #f89b29 0%, #ff0f7b 100% );
6  border-radius: 10px;
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  overflow: hidden;
11  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
12}
13
14.card svg {
15  width: 48px;
16  fill: #333;
17  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
18}
19
20.card:hover {
21  transform: rotate(-5deg) scale(1.1);
22  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
23}
24
25.card__content {
26  position: absolute;
27  top: 50%;
28  left: 50%;
29  transform: translate(-50%, -50%) rotate(-45deg);
30  width: 100%;
31  height: 100%;
32  padding: 20px;
33  box-sizing: border-box;
34  background-color: #fff;
35  opacity: 0;
36  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
37}
38
39.card:hover .card__content {
40  transform: translate(-50%, -50%) rotate(0deg);
41  opacity: 1;
42}
43
44.card__title {
45  margin: 0;
46  font-size: 24px;
47  color: #333;
48  font-weight: 700;
49}
50
51.card__description {
52  margin: 10px 0 0;
53  font-size: 14px;
54  color: #777;
55  line-height: 1.4;
56}
57
58.card:hover svg {
59  scale: 0;
60  transform: rotate(-45deg);
61}
62