<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 ----------> <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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="accordion"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </button> </h5> </div> <div id="collapseOne" class="collapse " aria-labelledby="headingOne" data-parent="#accordion"> <div class="card-body"> <div class="box"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="box-part text-center product-grid"> <i class="fa fa-instagram fa-3x" aria-hidden="true"></i> <div class="title"> <h4>Instagrsam</h4> </div> <div class="text"> <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span> </div> <ul class="social"> <li><a href="" data-tip="Quick View"><i class="fa fa-search"></i></a></li> <li><a href="" data-tip="Add to Cart"><i class="fa fa-shopping-cart"></i></a></li> </ul> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="box-part text-center"> <i class="fa fa-twitter fa-3x" aria-hidden="true"></i> <div class="title"> <h4>Twitter</h4> </div> <div class="text"> <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span> </div> <a href="#">Learn More</a> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="box-part text-center"> <i class="fa fa-facebook fa-3x" aria-hidden="true"></i> <div class="title"> <h4>Facebook</h4> </div> <div class="text"> <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span> </div> <a href="#">Learn More</a> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="box-part text-center"> <i class="fa fa-pinterest-p fa-3x" aria-hidden="true"></i> <div class="title"> <h4>Pinterest</h4> </div> <div class="text"> <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span> </div> <a href="#">Learn More</a> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="box-part text-center"> <i class="fa fa-google-plus fa-3x" aria-hidden="true"></i> <div class="title"> <h4>Google</h4> </div> <div class="text"> <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span> </div> <a href="#">Learn More</a> </div> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="box-part text-center"> <i class="fa fa-github fa-3x" aria-hidden="true"></i> <div class="title"> <h4>Github</h4> </div> <div class="text"> <span>Lorem ipsum dolor sit amet, id quo eruditi eloquentiam. Assum decore te sed. Elitr scripta ocurreret qui ad.</span> </div> <a href="#">Learn More</a> </div> </div> </div> </div> </div> </div> </div> </div> </div>

body{ background: #eee; } span{ font-size:15px; } a{ text-decoration:none; color: #0062cc; border-bottom:2px solid #0062cc; } .box{ padding:60px 0px; } .box-part{ background:#FFF; border-radius:0; padding:60px 10px; margin:30px 0px; } .text{ margin:20px 0px; } .fa{ color:#4183D7; } .product-grid { font-family: Raleway,sans-serif; text-align: center; padding: 20px 5px; border: 1px solid rgba(0,0,0,.1); overflow: hidden; position: relative; z-index: 1; } .product-grid:hover {background:grey;} .product-grid .social{width: 150px; padding: 0; margin: 0; list-style: none; opacity: 0; /* transform: translateY(-64%) translateX(-50%); */ position: absolute; top: 0; right: 0; z-index: 1; transition: all .3s ease 0s; left: 0; margin: auto auto; bottom: 0; height: 100%; display: flex; align-items: center; justify-content: center;} .product-grid:hover .social{opacity:1;top:10%;right;0} .product-grid .social li{display:inline-block} .product-grid .social li a{color:#fff;background-color:#333;font-size:16px;line-height:40px;text-align:center;height:40px;width:40px;margin:0 2px;display:block;position:relative;transition:all .3s ease-in-out} .product-grid .social li a:hover{color:#fff;background-color:#ef5777} .product-grid .social li a:after,.product-grid .social li a:before{content:attr(data-tip);color:#fff;background-color:#000;font-size:12px;letter-spacing:1px;line-height:20px;padding:1px 5px;white-space:nowrap;opacity:0;transform:translateX(-50%);position:absolute;left:50%;top:-30px} .product-grid .social li a:after{content:'';height:15px;width:15px;border-radius:0;transform:translateX(-50%) rotate(45deg);top:-20px;z-index:-1} .product-grid .social li a:hover:after,.product-grid .social li a:hover:before{opacity:1}