1.card {
2  width: 195px;
3  height: 285px;
4  background: #313131;
5  border-radius: 20px;
6  ;
7  display: flex;
8  flex-direction: column;
9  align-items: center;
10  justify-content: center;
11  color: white;
12  transition: 0.2s ease-in-out;
13}
14
15.img {
16  height: 30%;
17  position: absolute;
18  transition: 0.2s ease-in-out;
19  z-index: 1;
20}
21
22.textBox {
23  opacity: 0;
24  display: flex;
25  flex-direction: column;
26  align-items: center;
27  justify-content: center;
28  gap: 15px;
29  transition: 0.2s ease-in-out;
30  z-index: 2;
31}
32
33.textBox > .text {
34  font-weight: bold;
35}
36
37.textBox > .head {
38  font-size: 20px;
39}
40
41.textBox > .price {
42  font-size: 17px;
43}
44
45.textBox > span {
46  font-size: 12px;
47  color: lightgrey;
48}
49
50.card:hover > .textBox {
51  opacity: 1;
52}
53
54.card:hover > .img {
55  height: 65%;
56  filter: blur(7px);
57  animation: anim 3s infinite;
58}
59
60@keyframes anim {
61  0% {
62    transform: translateY(0);
63  }
64
65  50% {
66    transform: translateY(-20px);
67  }
68
69  100% {
70    transform: translateY(0);
71  }
72}
73
74.card:hover {
75  transform: scale(1.04) rotate(-1deg);
76}
77
78