.product { cursor: pointer; position: relative; padding-bottom: 100px; border-radius: 5px; overflow: hidden; -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; } .product:hover { box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.2); } .product img { width: 100%; } .stats-container { background: #fff; padding: 25px 15px; position: absolute; bottom: 0; width: 100%; } .stats-container .product_name { font-size: 22px; color: #393c45; } .stats-container p { font-size: 16px; color: #b1b1b3; margin: 0; } .stats-container .product_price { float: right; color: #48cfad; font-size: 22px; font-weight: 600; } .image_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #48cfad; opacity: 0; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; } .product.compare .image_overlay, .product:hover .image_overlay { opacity: 0.7; } .view_details { position: absolute; top: 112px; left: 50%; margin-left: -85px; border: 2px solid #fff; color: #fff; font-size: 19px; text-align: center; text-transform: uppercase; font-weight: 700; padding: 10px 0; width: 172px; opacity: 0; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; } .view_details:hover { background: #fff; color: #48cfad; cursor: pointer; } .product:hover .view_details { opacity: 1; width: 152px; font-size: 15px; margin-left: -75px; top: 150px; -webkit-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; -o-transition: all 200ms ease-out; transition: all 200ms ease-out; }