1.card {
2  width: 190px;
3  height: 254px;
4  position: relative;
5  background: #f5f5f5;
6  color: #252525;
7  border-radius: 4px;
8  overflow: hidden;
9  line-height: 150%;
10  box-shadow: 0px 10px 20px rgba(80, 80, 80, 0.2);
11  transition: box-shadow .3s ease-in-out;
12}
13
14.card-info {
15  position: absolute;
16  bottom: 1em;
17  width: 100%;
18  text-align: center;
19}
20
21/* Image */
22.card-img {
23  background: #00ff88;
24  background: linear-gradient(to top, #00ff88, #61efff);
25  height: 100%;
26  width: 100%;
27  position: absolute;
28  transition: transform .3s ease-in-out;
29  z-index: 2;
30}
31
32/* Buttons */
33.social-media {
34  position: absolute;
35  bottom: 0;
36  display: flex;
37  justify-content: space-between;
38  width: 100%;
39  padding: 0 1rem;
40  transform: translateY(-6em);
41  z-index: 3;
42}
43
44.social-media li {
45  background: #f5f5f5;
46  display: inline-flex;
47  padding: 10px;
48  border-radius: 50%;
49  cursor: pointer;
50  opacity: 0;
51  transition: all .3s ease-in;
52}
53/* Icons */
54.social-media li svg {
55  --size: 24px;
56  width: var(--size);
57  height: var(--size);
58  fill: #252525;
59}
60
61/* Texts */
62.title {
63  font-size: 1.5em;
64  font-weight: bold;
65}
66
67.subtitle {
68  letter-spacing: 1px;
69  font-size: 0.9em;
70}
71
72
73/* Hovers */
74.card:hover {
75  box-shadow: 0px 15px 30px rgba(80, 80, 80, 0.3);
76}
77
78.card:hover .card-img {
79  transform: translateY(-5em);
80}
81
82.card:hover .social-media li {
83  transform: translateY(-5%);
84  opacity: 1;
85}
86
87.card:hover .social-media li:nth-child(1) {
88  transition-delay: 0s;
89}
90
91.card:hover .social-media li:nth-child(2) {
92  transition-delay: .1s;
93}
94
95.card:hover .social-media li:nth-child(3) {
96  transition-delay: .2s;
97}