"card 3D hover effect"
Bootstrap 3.0.0 Snippet by okrish

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id="wrap"> <div class="card"> <div class="thumb" id="one"></div> <div class="option"><i class="material-icons">favorite</i><i class="material-icons">edit</i><i class="material-icons">close</i></div> <h3>Bonsai Ceramic pot</h3> <hr/> <p class="price">$35.99</p> <hr/> <p class="desc">Chhajed Garden’s Sunrise 14.5 Cm Gardening Plant Container, White Nursery Ceramic Pot 6"</p> <div class="add"><a href="#">Add to Cart</a></div> <div class="buy"> <a href="#">Buy Now</a></div> </div> <div class="card"> <div class="thumb" id="two"></div> <div class="option"><i class="material-icons">favorite</i><i class="material-icons">edit</i><i class="material-icons">close</i></div> <h3>Kawaii Brown Pot</h3> <hr/> <p class="price">$49.99</p> <hr/> <p class="desc">Studio Pottery Handcrafted Brown Drip Glazed Creamic Planter Home Indoor Outdoor Gardening Flower Pot</p> <div class="add"> <a href="#">Add to Cart</a></div> <div class="buy"><a href="#">Buy Now</a></div> </div> <div class="card"> <div class="thumb" id="three"></div> <div class="option"><i class="material-icons">favorite</i><i class="material-icons">edit</i><i class="material-icons">close</i></div> <h3>Vintage Glazed Pot</h3> <hr/> <p class="price">$39.99</p> <hr/> <p class="desc">Studio Pottery Handcrafted Multicolored Glazed Creamic Planter Home Indoor Outdoor Flower Pot</p> <div class="add"> <a href="#">Add to Cart</a></div> <div class="buy"><a href="#">Buy Now</a></div> </div> </div>
@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700"); ::-webkit-scrollbar { display: none; } .center, #wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } * { box-sizing: border-box; text-align: center; text-decoration: none; font-family: "Roboto", sans-serif; } body { background: #F2F2F2; } #wrap { width: 85%; height: auto; } #wrap .card { width: 32%; height: auto; background: #fff; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3); float: left; position: relative; border-radius: 5px; padding: 0 10px; } #wrap .card:nth-child(2) { margin: 0 2%; } #wrap .card:hover .thumb { top: -25%; } #wrap .card .thumb { width: 90%; height: 150px; background: #000; border-radius: 5px; background-size: cover; background-position: center; position: absolute; left: 50%; top: -10%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 10; -webkit-transition: 0.3s cubic-bezier(0.67, -0.12, 0.45, 1.5); transition: 0.3s cubic-bezier(0.67, -0.12, 0.45, 1.5); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3); } #wrap .card #one { background-image: url("https://source.unsplash.com/UcfKYTan-LU"); } #wrap .card #two { background-image: url("https://source.unsplash.com/VyKP21q9RZ8"); } #wrap .card #three { background-image: url("https://source.unsplash.com/AULrWTjZm74"); } #wrap .card .option { width: 60%; height: 30px; margin: 90px auto 0 auto; } #wrap .card .option i { font-size: 18px; line-height: 30px; padding: 0 5%; color: #E63D3A; opacity: 0.6; position: relative; } #wrap .card .option i:hover { cursor: pointer; } #wrap .card h3 { font-size: 18px; font-weight: 700; margin-top: 20px; color: #E63D3A; opacity: 0.6; } #wrap .card hr { width: 10%; opacity: 0.5; margin: 10px auto; } #wrap .card .price { font-size: 14px; font-weight: 700; color: #4d4d4d; } #wrap .card .desc { margin: 15px 0; font-size: 13px; line-height: 20px; opacity: 0.8; } #wrap .card .add, #wrap .card .buy { width: 48%; height: 30px; border-radius: 4px; margin-bottom: 10px; -webkit-transition: 0.3s linear; transition: 0.3s linear; } #wrap .card .add a, #wrap .card .buy a { line-height: 30px; font-size: 13px; color: #fff; } #wrap .card .add { float: left; background: #FF9F00; } #wrap .card .add:hover { background: #cc7f00; } #wrap .card .buy { float: right; background: #FB641B; } #wrap .card .buy:hover { background: #df4b04; } @media screen and (max-width: 480px) { #wrap { top: 10%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } #wrap .card { width: 100%; } #wrap .card:nth-child(2) { margin: 50px 0; } #wrap .card:nth-child(3) { margin-bottom: 20px; } }

Related: See More


Questions / Comments: