<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="item active"> <div class="row"> <div class="col-lg-6 col-md-6"> <div class="text"> <h1>BOAT NECKED TOP</h1> </div><!--text--> </div><!--col--> <div class="col-lg-6 col-md-6"> <img src="images/banner1.png" alt="banner1"> </div><!--col--> </div><!--row--> </div><!--item-->

<script> var lFollowX = 0, lFollowY = 0, x = 0; y = 0, friction = 1 / 30; function moveBackground() { x += (lFollowX - x) * friction; y += (lFollowY - y) * friction; translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)'; $('.item img').css({ '-webit-transform': translate, '-moz-transform': translate, 'transform': translate }); window.requestAnimationFrame(moveBackground); } $(window).on('mousemove click', function(e) { var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX)); var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY)); lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow lFollowY = (10 * lMouseY) / 100; }); moveBackground(); </script><div class="item active"> <div class="row"> <div class="col-lg-6 col-md-6"> <div class="text"> <h1>BOAT NECKED TOP</h1> </div><!--text--> </div><!--col--> <div class="col-lg-6 col-md-6"> <img src="images/banner1.png" alt="banner1"> </div><!--col--> </div><!--row--> </div><!--item-->