Card by Ans453

1.card {
2  width: 190px;
3  height: 254px;
4  background: rgb(45, 45, 45);
5  transition: all 0.4s;
6  border-radius: 10px;
7  box-shadow: 0px 0px 10px 5px  rgba(0, 0, 0, 0.705);
8  font-size: 30px;
9  font-weight: 900;
10}
11
12.card:hover {
13  border-radius: 15px;
14  cursor: pointer;
15  transform: scale(1.2);
16  box-shadow: 0px 0px 10px 5px  rgba(0, 0, 0, 0.705);
17  background: rgb(0, 0, 0);
18}
19
20.first-content {
21  height: 100%;
22  width: 100%;
23  transition: all 0.4s;
24  display: flex;
25  justify-content: center;
26  align-items: center;
27  opacity: 1;
28  border-radius: 15px;
29}
30
31.card:hover .first-content {
32  height: 0px;
33  opacity: 0;
34}
35
36.second-content {
37  height: 0%;
38  width: 100%;
39  opacity: 0;
40  display: flex;
41  justify-content: center;
42  align-items: center;
43  border-radius: 15px;
44  transition: all 0.4s;
45  font-size: 0px;
46  transform: rotate(90deg) scale(-1);
47}
48
49.card:hover .second-content {
50  opacity: 1;
51  height: 100%;
52  font-size: 1.8rem;
53  transform: rotate(0deg);
54}
55