JSFiddle - React, Tailwind, and code Playground

by lucaslazaro

HTML

<div class="box">
  <img src="http://placehold.it/1920x600/fff/fff">
  <div class="carousel-img">
    <img class="image" src="http://placehold.it/200x150/ff0000/ff0000">
  </div>
</div>

CSS

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;
}

JavaScript

$('.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 .image').css({
    '-webkit-transform': translateProperty,
    '-moz-transform': translateProperty,
    '-ms-transform': translateProperty,
    '-o-transform': translateProperty,
    'transform': translateProperty
  });
});