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: white;
12  padding: 16px;
13  border: 1px solid #232323;
14  transition: all .5s ease-in-out;
15}
16
17.card-hidden {
18  display: flex;
19  transform: translateY(200%);
20  flex-direction: column;
21  gap: .5rem;
22  transition: transform .5s ease-in, opacity .3s ease-in;
23  opacity: 0;
24}
25
26.card-border {
27  position: absolute;
28  width: 100%;
29  height: 100%;
30  left: 0;
31  top: 0;
32  border: 1px dashed #232323;
33  border-radius: 8px;
34  z-index: -1;
35}
36
37/*Hovers*/
38.card:hover {
39  transform: translate(-15px, -15px);
40  border-color: #5bc0eb;
41}
42
43.card:hover .card-hidden {
44  transform: translateY(0);
45  opacity: 1;
46}
47
48.card:hover .title {
49  transform: translateY(200%);
50}
51
52/*Text*/
53.title {
54  position: absolute;
55  bottom: 1rem;
56  transition: transform .25s ease-out;
57}
58
59/*Button*/
60.button {
61  padding: 8px;
62  background-color: #5bc0eb;
63  cursor: pointer;
64}
65
66.button:hover {
67  background-color: #53aed4;
68}
69
70
71
72
73
74