1.card {
2  width: 190px;
3  height: 254px;
4  background: #d3d3d3;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8}
9
10.one {
11  width: 90%;
12  height: 95%;
13  background-color: #c0c0c0;
14  display: flex;
15  justify-content: center;
16  align-items: center;
17  border-radius: 3%;
18}
19
20.two {
21  width: 90%;
22  height: 95%;
23  display: flex;
24  justify-content: center;
25  align-items: center;
26  opacity: 0;
27  border-radius: 3%;
28  background-color: #9c9c9c;
29  transition: 1s;
30  transition-delay: 0.2s;
31}
32
33.three {
34  width: 90%;
35  height: 95%;
36  display: flex;
37  justify-content: center;
38  align-items: center;
39  opacity: 0;
40  border-radius: 3%;
41  background-color: #797979;
42  transition: 0.9s;
43  transition-delay: 0.2s;
44}
45
46.four {
47  width: 90%;
48  height: 95%;
49  display: flex;
50  justify-content: center;
51  align-items: center;
52  color: #ececec;
53  opacity: 0;
54  border-radius: 3%;
55  background-color: #5a5a5a;
56  transition: 0.8s;
57  transition-delay: 0.2s;
58}
59
60.five {
61  width: 90%;
62  height: 95%;
63  display: flex;
64  justify-content: center;
65  align-items: center;
66  color: #ececec;
67  opacity: 0;
68  border-radius: 3%;
69  background-color: #424242;
70  transition: 0.7s;
71  transition-delay: 0.2s;
72}
73
74.six {
75  width: 90%;
76  height: 95%;
77  color: #ececec;
78  text-align: center;
79  opacity: 0;
80  border-radius: 3%;
81  background-color: #302f2f;
82  transition: 0.6s;
83  transition-delay: 0.2s;
84}
85
86.text2 {
87  padding-top: 50%;
88  transform: translateY(-5em);
89  transition: 0.2s;
90  opacity: 0;
91}
92
93.card:hover .two {
94  opacity: 1;
95  transition: 0.4s;
96}
97
98.card:hover .three {
99  opacity: 1;
100  transition: 0.5s;
101}
102
103.card:hover .four {
104  opacity: 1;
105  transition: 0.6s;
106}
107
108.card:hover .five {
109  opacity: 1;
110  transition: 0.7s;
111}
112
113.card:hover .six {
114  opacity: 1;
115  transition: 0.8s;
116}
117
118.card:hover .text1 {
119  opacity: 0;
120}
121
122.card:hover .text2 {
123  transform: translateY(2em);
124  transition-delay: 0.5s;
125  opacity: 1;
126}
127
128.text1 {
129  position: absolute;
130  opacity: 1;
131}
132