1.container {
2  position: relative;
3  width: 190px;
4  height: 254px;
5}
6
7.card {
8  position: relative;
9  width: 190px;
10  height: 254px;
11  background: #f5f5f5;
12  border-radius: 8px;
13  color: #232323;
14  padding: 16px;
15  border: 1px solid #232323;
16  transition: all .5s ease-in-out;
17  overflow: hidden;
18}
19
20.card-hidden {
21  display: flex;
22  transform: translateY(200%);
23  flex-direction: column;
24  gap: .5rem;
25  transition: transform .5s ease-in, opacity .3s ease-in;
26  opacity: 0;
27}
28
29.card-border {
30  position: absolute;
31  width: 100%;
32  height: 100%;
33  left: 0;
34  top: 0;
35  border: 1px dashed #232323;
36  border-radius: 8px;
37  z-index: -1;
38}
39
40/*Hovers*/
41.card:hover {
42  transform: translate(-15px, -15px);
43  border-color: #5bc0eb;
44}
45
46.card:hover .card-hidden {
47  transform: translateY(0);
48  opacity: 1;
49}
50
51.card:hover .title {
52  transform: translateY(200%);
53}
54
55/*Text*/
56.title {
57  position: absolute;
58  bottom: 1rem;
59  font-weight: 700;
60  font-size: 1.5rem;
61  transition: transform .25s ease-out;
62}
63
64.title-in {
65  font-weight: 700;
66  font-size: 1.25rem;
67}
68
69/*Button*/
70.button {
71  display: inline-flex;
72  justify-content: center;
73  padding: 8px;
74  border-radius: 24px;
75  font-weight: 600;
76  background-color: #5bc0eb;
77  cursor: pointer;
78  transition: background-color .3s ease-in-out;
79}
80
81.button:hover {
82  background-color: #53aed4;
83}
84
85
86
87
88
89