JSFiddle - React, Tailwind, and code Playground

HTML

<div class='Preloader text-center'>
  <span class='Preload-start'><img class="Preload-startImg" src="http://hotdot.pro/img/logo/preload.svg" alt="" /></span>
  <span class='Preload-end'><img class="Preload-endImg" src="http://hotdot.pro/img/logo/classic.svg" alt="" /></span>
</div>

CSS

.Preloader {
  position: relative;
  width: 494px;
  height: 126px;
  background: url(http://i.imgur.com/XS3Ww84.png) no-repeat;
}
.Preloader span {
  position: absolute;
  top: 0;
  overflow: hidden;
  transition: width 2s linear;
}
.Preload-start {
  width: 100%;
  right: 0;
  direction: rtl;
}
.Preload-end {
  width: 0%;
  left: 0;
}

.Preloader:hover .Preload-end {
  width: 100%;
  outline: solid 1px red;
}
.Preloader:hover .Preload-start {
  width: 0%;
  outline: solid 1px blue;
}