Transform - origin of image on mouse move on parent

Question

I am trying to add smooth move effect on img when user do a mousemove on image parent element (here .carousel-img ) but I can't run it properly.

What am I doing wrong?

 $('.carousel-img').on('mousemove', function(e){ $('.carousel-img img').css({'transform-origin': ((e.pageX - $('.carousel-img img').offset().left) / $('.carousel-img img').width()) * 100 + '% ' + ((e.pageY - $('.carousel-img img').offset().top) / $('.carousel-img img').height()) * 100 +'%'}); }) 

 html, body{height:100%; width:100%;} .box{position: relative; height:100%; width:100%;} .carousel-img { position: absolute; right:0; bottom:0; left: 0; top:0; padding:100px; } .carousel-img img { position: relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <img src="http://placehold.it/1920x600/fff/fff"> <div class="carousel-img"> <img src="http://placehold.it/200x150/ff0000/ff0000" > </div> </div> 

Answer 1

You're changing the transform-origin property instead of the transform property. You want to use the translate(x,y) to define the movement you're looking for.

You also should include a transition to your img selector, so that the movement is smooth. I also added some other attributes that may be useful when adding more complex animations such as translate3D types.

Check the updated snippet below.

 $('.carousel-img').on('mousemove', function(e) { var translateX = ((e.pageX - $('.carousel-img img').offset().left) / $('.carousel-img img').width()) * 100; var translateY = ((e.pageY - $('.carousel-img img').offset().top) / $('.carousel-img img').height()) * 100; var translateProperty = 'translate(' + translateX + '%, ' + translateY + '%)'; $('.carousel-img img').css({ '-webkit-transform': translateProperty, '-moz-transform': translateProperty, '-ms-transform': translateProperty, '-o-transform': translateProperty, 'transform': translateProperty }); }); 

 html, body { height: 100%; width: 100%; } .box { position: relative; height: 100%; width: 100%; } .carousel-img { position: absolute; right: 0; bottom: 0; left: 0; top: 0; padding: 100px; } .carousel-img img { position: relative; /* Add transition */ transition: all 0.2s ease; -webkit-transition: all 0.2s ease; /* Default values for transition to be possible */ transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"> <img src="http://placehold.it/1920x600/fff/fff"> <div class="carousel-img"> <img src="http://placehold.it/200x150/ff0000/ff0000" > </div> </div>