1.card {
2 width: 190px;
3 height: 254px;
4 background: #f5f5f5;
5 padding: 2rem 1.5rem;
6 transition: box-shadow .3s ease, transform .2s ease;
7}
8
9.card-info {
10 display: flex;
11 flex-direction: column;
12 justify-content: center;
13 align-items: center;
14 transition: transform .2s ease, opacity .2s ease;
15}
16
17/*Image*/
18.card-avatar {
19 --size: 60px;
20 background: linear-gradient(to top, #f1e1c1 0%, #fcbc97 100%);
21 width: var(--size);
22 height: var(--size);
23 border-radius: 50%;
24 transition: transform .2s ease;
25 margin-bottom: 1rem;
26}
27
28
29/*Card footer*/
30.card-social {
31 transform: translateY(200%);
32 display: flex;
33 justify-content: space-around;
34 width: 100%;
35 opacity: 0;
36 transition: transform .2s ease, opacity .2s ease;
37}
38
39.card-social__item {
40 list-style: none;
41}
42
43.card-social__item svg {
44 display: block;
45 height: 18px;
46 width: 18px;
47 fill: #515F65;
48 cursor: pointer;
49 transition: fill 0.2s ease ,transform 0.2s ease;
50}
51
52/*Text*/
53.card-title {
54 color: #333;
55 font-size: 1.5em;
56 font-weight: 600;
57 line-height: 2rem;
58}
59
60.card-subtitle {
61 color: #859ba8;
62 font-size: 0.8em;
63}
64
65/*Hover*/
66.card:hover {
67 box-shadow: 0 8px 50px #23232333;
68}
69
70.card:hover .card-info {
71 transform: translateY(-5%);
72}
73
74.card:hover .card-social {
75 transform: translateY(100%);
76 opacity: 1;
77}
78
79.card-social__item svg:hover {
80 fill: #232323;
81 transform: scale(1.1);
82}
83
84.card-avatar:hover {
85 transform: scale(1.1);
86}