<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="container"> <div class="row"> <div class="jumbotron text-center"> <h1>Product Hover Effect</h1> </div> <div class="col-md-6"> <!-- .pro-text --> <div class="pro-text"> <!-- .pro-img --> <div class="pro-img"> <img src="http://demo.zavana.net/outstock/outstock/assets/images/Products/5.jpg" alt="2" class='img-responsive'> <!-- .hover-img --> <div class="hover-img"> <ul> <li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-sliders" aria-hidden="true"></i></a></li> <li><a href="#" data-toggle="modal" data-target="#quickModal" data-whatever="@mdo"><i class="fa fa-search" aria-hidden="true"></i></a></li> </ul> </div> <div class="new tage"> <span class="new-text">NEW</span> <span class="pres-text">-15%</span> </div> <!-- /.hover-img --> </div> <!-- /.pro-img --><a href="#">Wooden container Bowl</a> <a href="#" class="addtocart">+ Add to cart</a> <div class="price">$160.00</div> </div> <!-- /.pro-text --> </div> <div class="col-md-6"> <!-- .pro-text --> <div class="pro-text"> <!-- .pro-img --> <div class="pro-img"> <img src="http://demo.zavana.net/outstock/outstock/assets/images/Products/1.jpg" alt="2" class='img-responsive'> <!-- .hover-img --> <div class="hover-img"> <ul> <li><a href="#"><i class="fa fa-heart-o" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-sliders" aria-hidden="true"></i></a></li> <li><a href="#" data-toggle="modal" data-target="#quickModal" data-whatever="@mdo"><i class="fa fa-search" aria-hidden="true"></i></a></li> </ul> </div> <div class="new tage"> <span class="new-text">NEW</span> <span class="pres-text">-15%</span> </div> <!-- /.hover-img --> </div> <!-- /.pro-img --><a href="#">Wooden container Bowl</a> <a href="#" class="addtocart">+ Add to cart</a> <div class="price">$160.00</div> </div> <!-- /.pro-text --> </div> </div> </div>

.pro-text { float: left; overflow: hidden; width: 100%; margin-bottom: 30px; } .pro-img { margin-bottom: 10px; position: relative; } .hover-img { z-index: 999; } .hover-img { background: rgba(0, 0, 0,0.15) none repeat scroll 0 0; bottom: 0px; opacity: 0; position: absolute; right: 15px; text-align: center; transition: all 0.5s ease 0s; } .hover-img>ul { list-style: outside none none; padding: 10px 10px 0; } .hover-img li { border-bottom: 1px solid rgb(235, 235, 235); margin-bottom: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; } .hover-img li a { font-size: 16px; } .pro-text a { color: #282828; display: block; font-size: 14px; } .pro-img .new .new-text { margin: 0 14px; } .pro-img .new { background: rgba(0, 0, 0, 0) url(http://demo.zavana.net/outstock/outstock/assets/images/sale-strap.png) no-repeat scroll 0 0; margin-top: 46px; padding: 0; right: -30px; top: 0; transform: rotate(90deg); width: 120px; } .pro-img .tage { color: #fff; font-size: 14px; padding: 10px; position: absolute; right: 0; top: 0; } .pro-text .addtocart { border-bottom: 1px solid rgb(235, 235, 235); float: left; font-size: 12px; font-weight: 600; opacity: 0; padding: 4px 0; text-decoration: none; text-transform: uppercase; margin-left: -97px; transition: all 0.5s ease 0s; } .pro-text .price { color: rgb(31, 31, 31); float: left; font-family: "Rubik", sans-serif; font-size: 14px; font-weight: 400; padding: 4px 0; transition: all 0.5s ease 0s; } .pro-text:hover .pro-img .hover-img { opacity: 1; bottom: 20px; } .hover-img li a:hover { color: #bc8246; } .pro-text:hover .price { margin-left: 10px; opacity: 0; } .pro-text:hover .addtocart { opacity: 1; margin-left: 0px; }