<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"> <div class="item"> <img src="images/sliderbanner.jpg" alt="sliderbanner"> <div class="item-overlay top"></div> </div><!--item--> <div class="para text-center"> <p>Example Product</p> <p>123</p> <a href="zoom.html"><button type="button" class="addcart"><span>ADD TO CART</span></button></a> </div><!--para--> </div>

.item { position: relative; overflow: hidden; } .item img { width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; height: 270px; cursor: all-scroll; } .item:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .para{ background-color: #000; padding-bottom: 15px; } .para p{ font-size: 20px; color: #fff; }