JSFiddle - React, Tailwind, and code Playground

HTML

<div id="banner">
    <img src="http://www.isolabgmbh.com/resim/urun/buyuk/45-a.jpg" width="50" />
</div>
<div id="banner2">
    <img src="http://www.isolabgmbh.com/resim/urun/buyuk/45-a.jpg" width="50" />
</div>

CSS

#banner2 img{
/*transition*/
-webkit-transition:all 0.5s ease-in-out;
   -moz-transition:all 0.5s ease-in-out;
     -o-transition:all 0.5s ease-in-out;
        transition:all 0.5s ease-in-out;
}

.big{
    width: 500px;
}
.small{
    width: 50px;
}

JavaScript

$('#banner img').hover(function(){
    $(this).stop(true, true).animate({
       width: 500,
        left: "100",
    }, 500, 'linear');
},function(){
    $(this).stop(true, true).animate({
       width: 50,
        left: "-50"
    }, 500, 'linear');
});

$('#banner2 img').hover(function(){
    $(this).removeClass('small').addClass('big');
},function(){
    $(this).removeClass('big').addClass('small');
});