JSFiddle - React, Tailwind, and code Playground

by stevescotthome

HTML

<div id="viewport">
    <img id="menu-image" class="move-right" src="http://thatgamecompany.com/wp-content/themes/thatgamecompany/_include/img/flower/flower-game-screenshot-2.jpg" />
</div>
    
<button>Move</button>

CSS

#viewport:hover .move-right {
    transform: translate(575px,0);
    -webkit-transform: translate(575px,0); /** Chrome & Safari **/
    -o-transform: translate(575px,0); /** Opera **/
    -moz-transform: translate(575px,0); /** Firefox **/
}

#menu-image{
   position: absolute;   
   left:-525px;
    
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}


#viewport{
    width: 100px;
    height: 100px;
    overflow:hidden;
    position:relative;
}

JavaScript

$(document).ready(function(){
       
});