7.1K views
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}
MIT License