JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<span id="container">
  <img src="https://images.unsplash.com/photo-1448975750337-b0290d621d6d?crop=entropy&dpr=2&fit=crop&fm=jpg&h=775&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450" />
</span>

CSS

#container {
  position:absolute;
  width:200px;
  height:200px;
  left:0px;
  overflow:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:translateX(200px);
  -moz-transform:translateX(200px);
  -o-transform:translateX(200px);
  transform:translateX(200px);
}
#container > img {
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:translate(-200px, -150px);
  -moz-transform:translate(-200px, -150px);
  -o-transform:translate(-200px, -150px);
  transform:translate(-200px, -150px);
}
body, html {
  margin:0;
  width:100%;
  height:100%;
}
span {
  display:inline-block;
}

JavaScript

$(function() {
  $('#container').css({
  	'-webkit-transform': 'translateX(0)',
    '-moz-transform': 'translateX(0)',
    '-o-transform': 'translateX(0)',
    'transform': 'translateX(0)'
  });
  $('#container > img').css({
  	'-webkit-transform': 'translate(0px, -150px)',
    '-moz-transform': 'translate(0px, -150px)',
    '-o-transform': 'translate(0px, -150px)',
    'transform': 'translate(0px, -150px)'
  });
});