<div></div>
html,body{
  width: 100vw;
  height: 100vh;
}
div{
  width: 100vw;
  height: 100vh;
  position: relative;
  padding-top: 45%;
  background: url(https://www.w3cplus.com/sites/default/files/blogs/2015/1506/runner-long-distance.jpg),linear-gradient(90deg,#fff 50%,#000 50.5%);
  background-size: cover,20% 100%;
  background-blend-mode: difference;
  transition: 2s;
  background-position: -350px 0px,0px top;
  background-repeat: no-repeat,repeat-x;
  
  &:hover{
    background-position: -2000px 0px,300px top;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.