1.card {
2 position: relative;
3 width: 11.875em;
4 height: 16.5em;
5 box-shadow: 0px 1px 13px rgba(0,0,0,0.1);
6 cursor: pointer;
7 transition: all 120ms;
8 display: flex;
9 align-items: center;
10 justify-content: center;
11 background: #fff;
12 padding: 0.5em;
13 padding-bottom: 3.4em;
14}
15
16.card::after {
17 content: "Add to Cart";
18 padding-top: 1.25em;
19 padding-left: 1.25em;
20 position: absolute;
21 left: 0;
22 bottom: -60px;
23 background: #00AC7C;
24 color: #fff;
25 height: 2.5em;
26 width: 90%;
27 transition: all 80ms;
28 font-weight: 600;
29 text-transform: uppercase;
30 opacity: 0;
31}
32
33.card .title {
34 font-family: Arial, Helvetica, sans-serif;
35 font-size: 0.9em;
36 position: absolute;
37 left: 0.625em;
38 bottom: 1.875em;
39 font-weight: 400;
40 color: #000;
41}
42
43.card .price {
44 font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
45 font-size: 0.9em;
46 position: absolute;
47 left: 0.625em;
48 bottom: 0.625em;
49 color: #000;
50}
51
52.card:hover::after {
53 bottom: 0;
54 opacity: 1;
55}
56
57.card:active {
58 transform: scale(0.98);
59}
60
61.card:active::after {
62 content: "Added !";
63 height: 3.125em;
64}
65
66.text {
67 max-width: 55px;
68}
69
70.image {
71 background: rgb(241, 241, 241);
72 width: 100%;
73 height: 100%;
74 display: grid;
75 place-items: center;
76}
