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