JSFiddle - React, Tailwind, and code Playground

by mokhovcom

HTML

<div id="container">
    <div id="box">
    </div>
</div>

CSS

#container {
    background: url('http://www.google.ru/images/errors/robot.png') left top repeat;
    height: 213px;
    overflow: hidden;
}
#box {
    background: url('http://www.google.ru/images/srpr/logo11w.png') left top no-repeat;
    width: 100px;
    height: 211px;
    position: relative;
    left: 0;
    transition: left 3s linear, background-position-x 3s linear;
    border: 1px solid #000;
}
#container:hover #box {
    left: 500px;
    background-position-x: -500px;
}