JSFiddle - React, Tailwind, and code Playground

HTML

<div id="css">
  <p>CSS animated</p>
  <img src="/favicon.png" alt="" />
</div>
<div id="js">
  <p>jQuery animated</p>
  <img src="/favicon.png" alt="" />
</div>

CSS

img {
  position: relative;
  margin: 20px;
  left: 0px;
  -webkit-transition: left 500ms;
  -moz-transition: left 500ms;
  -ms-transition: left 500ms;
  -o-transition: left 500ms;
  transition: left 500ms;
}

#css:hover img {
  left: 50px;
}

JavaScript

$('#js').hover(function() {
  $(this).find('img').animate({
    left: '50px'
  }, 500);
}, function() {
  $(this).find('img').animate({
    left: '0px'
  }, 500);
});