JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

CSS

div {
  width: 100px;
  height: 100px;
  background: transparent;
  position: relative;
  overflow: hidden;
}
div:before,
div:after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}
div:before {
  left: 100px;
  background: red;
  transition: left 1s ease-out;
}
div:after {
  background: url(http://i.imgur.com/SMW1ukh.png);
}
div:hover:before {
  left: 0px;
}