JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logo3">
            <div id="bg">
            </div>
        </div>

CSS

body { background: #0f1923; margin:0px; padding:0px;}
#logo3 {
                top: 50px;
                left: 100px;
                overflow: hidden;
                width: 100px;
                height: 53px;
                position: absolute;
            }

            #bg {
                background-image: url("http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif");
                width: 600px;
                height: 53px;
                position: relative;
                left: -100px;
                background-position: 77px 0;
            }

JavaScript

$('#logo3').mouseenter(function(){
    var $this = $(this);
    $this.stop().animate( {left: "0px", width: "600px"}, 1000);
    $this.children(0).stop().animate({'background-position-y':'-100px',left: "0px"}, 1000);
}).mouseleave(function(){
    var $this = $(this);
    $this.stop().animate( {left: "100px", width: "100px"}, 1000);
    $this.children(0).stop().animate({'background-position-y':'0px',left: "-100px"}, 1000);
});