Card by Dailleer

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.32, 1);
12}
13
14.card svg {
15  width: 48px;
16  fill: #333;
17  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
18}
19
20.card:hover {
21  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
22}
23
24.card__content {
25  position: absolute;
26  top: 50%;
27  left: 50%;
28  transform: translate(-50%, -50%) rotate(-45deg);
29  width: 100%;
30  height: 100%;
31  padding: 20px;
32  box-sizing: border-box;
33  background-color: #fff;
34  opacity: 0;
35  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
36}
37
38.card:hover .card__content {
39  transform: translate(-50%, -50%) rotate(0deg);
40  opacity: 1;
41}
42
43.card__title {
44  margin: 0;
45  font-size: 24px;
46  color: #333;
47  font-weight: 700;
48}
49
50.card__description {
51  margin: 10px 0 0;
52  font-size: 14px;
53  color: #777;
54  line-height: 1.4;
55}
56
57.card:hover svg {
58  scale: 0;
59  transform: rotate(-45deg);
60}
61