1@keyframes fadeInScale {
2  0% {
3    opacity: 0;
4    transform: scale(0) translateY(50%);
5  }
6
7  90% {
8    transform: scale(1.05);
9  }
10
11  100% {
12    opacity: 1;
13    transform: scale(1) translateY(0);
14  }
15}
16
17.container {
18  position: absolute;
19  width: 100%;
20  height: 100%;
21  display: flex;
22  justify-content: center;
23  align-items: center;
24}
25
26.card {
27  position: relative;
28  width: 20em;
29  background-color: #292929;
30  transition: all .3s ease-in-out;
31}
32
33.card:hover {
34  box-shadow: 0 10px 20px 10px rgba(black, .2);
35}
36
37.card__link {
38  display: block;
39  padding: 1em;
40  text-decoration: none;
41}
42
43.card__icon {
44  position: absolute;
45  width: 4em;
46  height: 4em;
47  transition: all .3s ease-in-out;
48}
49
50.card:hover .card__icon {
51  opacity: 0;
52  transform: scale(0);
53}
54
55.card__media {
56  padding: 2em 0;
57}
58
59.card__media	svg path {
60  opacity: 0;
61  transition: all .3s ease-in-out;
62  transform-origin: center center;
63}
64
65.card:hover svg path {
66  animation: fadeInScale .3s ease-in-out forwards;
67}
68
69.card:hover 	svg path:nth-child(2) {
70  animation-delay: .1s;
71}
72
73.card:hover 	svg path:nth-child(3) {
74  animation-delay: .2s;
75}
76
77.card__header {
78  position: relative;
79}
80
81.card__header-title {
82  margin: 0 0 .25em;
83  color: white;
84}
85
86.card__header-meta {
87  margin: 0;
88  color: #999;
89}
90
91.card__header-icon {
92  opacity: 0;
93  position: absolute;
94  right: 0;
95  top: 50%;
96  margin-top: -1em;
97  transform: translateX(-20%);
98  width: 2em;
99  height: 2em;
100  transition: all .3s ease-in-out;
101}
102
103.card:hover .card__header-icon {
104  opacity: 1;
105  transform: translateX(0);
106}