1.card {
2 width: 190px;
3 height: 254px;
4 position: relative;
5 outline: .5em solid #f5f5f5;
6 background: #ff930f;
7 background: linear-gradient(to top, #ff930f 0%, #fffa5c 100%);
8}
9
10.card::before {
11 content: "";
12 position: absolute;
13 top: 0;
14 right: 0;
15 bottom: 0;
16 left: 0;
17 z-index: 4;
18 background-color: rgba(80, 64, 44, 0);
19 transition: background-color 1s;
20}
21
22.card-info {
23 bottom: 0;
24 position: absolute;
25 width: 100%;
26 padding: 1.5em;
27 text-align: center;
28 transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860);
29}
30
31.card-bio {
32 padding: 1.8em;
33 text-align: center;
34 transform: translate(100%,40%);
35 transition: transform 1s cubic-bezier(0.785, 0.135, 0.150, 0.860);
36}
37
38.card-bio p {
39 font-size: 16px;
40 font-weight: 600;
41 line-height: 1.5em;
42}
43
44
45/*Text*/
46.title {
47 font-size: 1.3em;
48 font-weight: bold;
49}
50
51.title::after {
52 content: "";
53 display: block;
54 width: 50%;
55 height: 2px;
56 margin: 0 auto 4%;
57 background-color: #000;
58}
59
60.subtitle {
61 font-weight: 400;
62 line-height: 1em;
63}
64
65
66
67/*Hover*/
68.card:hover::before {
69 background-color: rgba(80, 64, 44, 0.25);
70}
71
72.card:hover .card-info {
73 transform: translateX(-100%);
74}
75
76.card:hover .card-bio {
77 transform: translate(0,40%);
78 opacity: 1;
79}
80
81
82