<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h3 class="h3">shopping Cart </h3> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="product-grid3"> <div class="product-image3"> <a href="#"> <img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo4/images/img-1.jpg"> <img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo4/images/img-2.jpg"> <img class="pic-3" src="http://bestjquery.com/tutorial/product-grid/demo5/images/img-3.jpg"> <img class="pic-4" src="http://bestjquery.com/tutorial/product-grid/demo5/images/img-4.jpg"> </a> <ul class="social"> <li><a href="#"><i class="fa fa-shopping-bag"></i></a></li> <li><a href="#"><i class="fa fa-shopping-cart"></i></a></li> </ul> <span class="product-new-label">New</span> </div> <div class="product-content"> <h3 class="title"><a href="#">Men's Blazer</a></h3> <div class="price"> $63.50 <span>$75.00</span> </div> <ul class="rating"> <li class="fa fa-star"></li> <li class="fa fa-star"></li> <li class="fa fa-star"></li> <li class="fa fa-star disable"></li> <li class="fa fa-star disable"></li> </ul> </div> </div> </div> </div> </div>

/********************* Shopping Demo-3 **********************/ .product-grid3{font-family:Roboto,sans-serif;text-align:center;position:relative;z-index:1} .product-grid3:before{content:"";height:81%;width:100%;background:#fff;border:1px solid rgba(0,0,0,.1);opacity:0;position:absolute;top:0;left:0;z-index:-1;transition:all .5s ease 0s} .product-grid3:hover:before{opacity:1;height:100%} .product-grid3 .product-image3{position:relative} .product-grid3 .product-image3 a{display:block} .product-grid3 .product-image3 img{width:100%;height:auto} .product-grid3 .pic-1{opacity:1;transition:all .5s ease-out 0s} .product-grid3:hover .pic-1{opacity:0} .product-grid3 .pic-2{position:absolute;top:0;left:0;opacity:0;transition:all .5s ease-out 0s} .product-grid3:hover .pic-2{opacity:1} .product-grid3 .social{width:120px;padding:0;margin:0 auto;list-style:none;opacity:0;position:absolute;right:0;left:0;bottom:-23px;transform:scale(0);transition:all .3s ease 0s} .product-grid3:hover .social{opacity:1;transform:scale(1)} .product-grid3:hover .product-discount-label,.product-grid3:hover .product-new-label,.product-grid3:hover .title{opacity:0} .product-grid3 .social li{display:inline-block} .product-grid3 .social li a{color:#e67e22;background:#fff;font-size:18px;line-height:50px;width:50px;height:50px;border:1px solid rgba(0,0,0,.1);border-radius:50%;margin:0 2px;display:block;transition:all .3s ease 0s} .product-grid3 .social li a:hover{background:#e67e22;color:#fff} .product-grid3 .product-discount-label,.product-grid3 .product-new-label{background-color:#e67e22;color:#fff;font-size:17px;padding:2px 10px;position:absolute;right:10px;top:10px;transition:all .3s} .product-grid3 .product-content{z-index:-1;padding:15px;text-align:left} .product-grid3 .title{font-size:14px;text-transform:capitalize;margin:0 0 7px;transition:all .3s ease 0s} .product-grid3 .title a{color:#414141} .product-grid3 .price{color:#000;font-size:16px;letter-spacing:1px;font-weight:600;margin-right:2px;display:inline-block} .product-grid3 .price span{color:#909090;font-size:14px;font-weight:500;letter-spacing:0;text-decoration:line-through;text-align:left;display:inline-block;margin-top:-2px} .product-grid3 .rating{padding:0;margin:-22px 0 0;list-style:none;text-align:right;display:block} .product-grid3 .rating li{color:#ffd200;font-size:13px;display:inline-block} .product-grid3 .rating li.disable{color:#dcdcdc} @media only screen and (max-width:1200px){.product-grid3 .rating{margin:0} } @media only screen and (max-width:990px){.product-grid3{margin-bottom:30px} .product-grid3 .rating{margin:-22px 0 0} } @media only screen and (max-width:359px){.product-grid3 .rating{margin:0} }