1.card {
2  width: 200px;
3  height: 300px;
4  background: #f8f9fa;
5  position: relative;
6  box-shadow: 15px 15px 50px #adb5bd75;
7  text-align: center;
8  transition: all 0.3s ease-in;
9}
10
11.card p {
12  transition: all 0.3s ease-in;
13  margin-top: 40px;
14}
15
16.card:hover {
17  cursor: pointer;
18  box-shadow: none;
19}
20
21.card:hover p {
22  transform: scale(1.5);
23  color: #f8f9fa;
24}
25
26.card::before {
27  content: '';
28  width: 100%;
29  height: 0;
30  background: #3f72ff;
31  position: absolute;
32  left: 0;
33  bottom: 0;
34      /* Or Top */
35  transition: 0.3s ease-in-out;
36  z-index: -1;
37}
38
39.card:hover::before {
40  height: 100%;
41}