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}