1.card5 {
2  width: 270px;
3  height: 350px;
4  background-color: rgb(255, 255, 255);
5  border-radius: 10px;
6  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
7  position: relative;
8  overflow: hidden;
9}
10
11.card5:before {
12  content: "";
13  position: absolute;
14  top: 0;
15  left: 0;
16  width: 100%;
17  height: 100%;
18  background: linear-gradient(45deg, #8f7eff, #44a4ff);
19  opacity: 0;
20  transition: opacity 0.5s ease-in-out;
21}
22
23.card5:hover:before {
24  opacity: 0.5;
25}
26
27.card5-content {
28  width: 170px;
29  height: 200px;
30  padding: 0 10px;
31  position: absolute;
32  top: 50%;
33  left: 50%;
34  transform: translate(-50%, -45%);
35  text-align: center;
36  color: rgb(0, 0, 0);
37  z-index: 1;
38  background-color: white;
39  transition: all 0.3s ease-in-out;
40  display: flex;
41  justify-content: space-evenly;
42  align-items: center;
43  flex-direction: column;
44}
45
46.card5-content span {
47  font-size: 1.7rem;
48  font-weight: 700;
49}
50
51.card5:hover .card5-content {
52  transform: translate(-50%, -50%);
53}
54