1.card {
2 height: 254px;
3 width: 190px;
4 position: relative;
5 transition: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
6 border-radius: 1em;
7 box-shadow: 0 0 20px 8px #d0d0d0;
8 ;
9}
10
11 /*Image*/
12.card-image {
13 height: 100%;
14 width: 100%;
15 position: absolute;
16 transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
17 background: #0a3394;
18 background: linear-gradient(to top, #0a3394, #4286f4);
19}
20
21/*Description */
22.card-description {
23 display: flex;
24 position: absolute;
25 gap: 1em;
26 flex-direction: column;
27 background-color: #f5f5f5;
28 height: 70%;
29 bottom: 0;
30 border-radius: 1em 1em 0 0;
31 transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
32 padding: 1rem;
33}
34
35/*Text*/
36.text-title {
37 font-size: 1.4em;
38 font-weight: 700;
39}
40
41.text-body {
42 font-size: 1em;
43 line-height: 150%;
44}
45
46
47/* Hover states */
48
49.card:hover .card-description {
50 transform: translateY(100%);
51}
52
53