<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="middle"> <div class="row"> <div class="col-md-4"></div> <div class="htx__card col-md-4"> <img class="htx__card__img" src="https://www.pngitem.com/pimgs/m/659-6591317_nike-moon-shoes-price-hd-png-download.png"> <div class="htc__card__btn"> <div class="btn-group" role="group"> <button type="button" class="btn btn-secondary"> <i class="far fa-eye"></i>View </button> <button type="button" class="btn btn-secondary"> <i class="far fa-heart"></i>Like </button> <button type="button" class="btn btn-secondary"> <i class="fas fa-shopping-bag"></i>Bag </button> </div> </div> </div> <div class="col-md-4"></div> </div> </div>

.middle{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .htx__card{ transition:.4s ease-in-out; } .htx__card img{ width:100%; transition:.4s ease-in-out; } .htx__card img:hover{ display:initial; } .htc__card__btn{ width:100%; height:100%; visibility:visible; } .htc__card__btn:hover{ visibility:visible; } .htc__card__btn button{ width:33.33333333%; opacity:0.7; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .htc__card__btn button:hover{ opacity:1; }