<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"> <h2 class="text-center">Zoom Image On Mouse Over</h2> <div class="row"> <div class="col-sm-4"> <div class="item"><img src="https://images.pexels.com/photos/247204/pexels-photo-247204.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" class="img-thumbnail"></div> </div> <div class="col-sm-4"> <div class="item"><img src="https://images.pexels.com/photos/247287/pexels-photo-247287.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-thumbnail"></div> </div> <div class="col-sm-4"> <div class="item"><img src="https://images.pexels.com/photos/458766/pexels-photo-458766.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" class="img-thumbnail"></div> </div> </div> </div>

.item{ left: 0; top: 0; position: relative; overflow: hidden; margin-top:50px; } .item img{ -webkit-transition: 0.6s ease; transition: 0.6s ease; } .item img:hover{ -webkit-transform: scale(1.2); transform: scale(1.2); } .img-thumbnail{ border:0px; border-radius:0px; }