Card by mRcOol7

1.card {
2  --background: linear-gradient(to right, #74ebd5 0%, #acb6e5 100%);
3  width: 190px;
4  height: 254px;
5  padding: 5px;
6  border-radius: 1rem;
7  overflow: visible;
8  background: #74ebd5;
9  background: var(--background);
10  position: relative;
11  z-index: 1;
12}
13
14.card::before,
15.card::after {
16  content: "";
17  position: absolute;
18  top: 0;
19  left: 0;
20  width: 100%;
21  height: 100%;
22  border-radius: 1rem;
23  z-index: -1;
24}
25
26.card::before {
27  background: linear-gradient(to bottom right, #f6d365 0%, #fda085 100%);
28  transform: rotate(2deg);
29}
30
31.card::after {
32  background: linear-gradient(to top right, #84fab0 0%, #8fd3f4 100%);
33  transform: rotate(-2deg);
34}
35
36.card-info {
37  --color: #292b2c;
38  background: var(--color);
39  color: var(--color);
40  display: flex;
41  justify-content: center;
42  align-items: center;
43  width: 100%;
44  height: 100%;
45  overflow: visible;
46  border-radius: 0.7rem;
47  position: relative;
48  z-index: 2;
49}
50
51.card .title {
52  font-weight: bold;
53  letter-spacing: 0.1em;
54}
55
56.card:hover::before,
57.card:hover::after {
58  opacity: 0;
59}
60
61.card:hover .card-info {
62  color: #74ebd5;
63  transition: color 1s;
64}
65