1.card {
2  width: 190px;
3  height: 254px;
4  position: relative;
5  border-radius: 16px;
6  background: #f5f5f5;
7  transition: box-shadow .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
8  overflow: hidden;
9  cursor: pointer;
10}
11
12.card-img {
13  position: absolute;
14  height: 100%;
15  width: 100%;
16  background-color: #6eee87;
17}
18
19.card-info {
20  position: absolute;
21  width: 100%;
22  bottom: 0;
23  padding: 1rem;
24  display: flex;
25  align-items: flex-end;
26  justify-content: space-between;
27}
28
29.card-icon {
30  opacity: 0;
31  transform: translateX(-20%);
32  width: 2em;
33  height: 2em;
34  transition: all .3s ease-in-out;
35}
36
37.icon {
38  --size: 20px;
39  width: var(--size);
40  height: var(--size);
41}
42
43/*Text*/
44.card-text p {
45  line-height: 140%;
46 /*Delete this line for multi-line text*/
47  white-space: nowrap;
48}
49
50.text-title {
51  font-weight: 900;
52  font-size: 1.2rem;
53  color: #222;
54}
55
56.text-subtitle {
57  color: #333;
58  font-weight: 500;
59  font-size: 1rem;
60}
61
62/*Hover*/
63.card:hover {
64  box-shadow: 0 10px 20px 4px rgba(35, 35, 35, .1);
65}
66
67.card:hover .card-icon {
68  opacity: 1;
69  transform: translateX(20%);
70}