1.card {
2 width: 190px;
3 height: 254px;
4 background: #f0f0f0;
5 border-radius: 10px;
6 text-align: center;
7 transition: all 0.5s;
8}
9
10.card:hover {
11 box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.623);
12 background-color: #4bb8ff;
13}
14
15.card .blob {
16 height: 10px;
17 width: 75%;
18 border-radius: 0 0 30px 30px;
19 margin: 0 auto;
20 background-color: #4bb8ff;
21 visibility: visible;
22 transition: all 0.3s;
23}
24
25.card:hover .blob {
26 height: 0;
27}
28
29.card .img {
30 display: flex;
31 margin: 30px auto 10px auto;
32 width: 70px;
33 height: 70px;
34 background-color: #4bb8ff;
35 border-radius: 50%;
36 font-size: 11px;
37 justify-content: center;
38 align-items: center;
39 transition: all 0.5s;
40}
41
42.card:hover .img {
43 width: 100%;
44 height: 70%;
45 border-radius: 10px 0 0;
46 margin: 0 auto;
47 background-color: #f0f0f0;
48 z-index: 99999;
49}
50
51.card h2 {
52 padding: 15px 10px;
53 font-size: 25px;
54 transition: all 0.1s;
55 z-index: -99;
56 line-height: 17px;
57}
58
59.card span {
60 font-size: 18px;
61}
62
63.card:hover h2 {
64 opacity: 0;
65 width: 100%;
66 position: absolute;
67 transition: all 0.5s;
68}
69
70.card>p {
71 opacity: 0;
72 transition: all 0.75s;
73}
74
75.card>p>svg {
76 padding: 5px;
77}
78
79.card:hover>p {
80 position: absolute;
81 bottom: 15px;
82 left: 35px;
83 opacity: 1;
84 transition: all 0.1s;
85}