JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <a href="#"></a>
</div>

CSS

div{
  margin-left:25px;
  width:365px;
  height:100px;
  background: url('https://htmlforum.io/uploads/monthly_2017_11/xbg_hover.png.6fbc7bc784ecfddc233039f337315ff8.png.pagespeed.ic.F8xE5CNAPB.webp') no-repeat;
  background-position:-25px 0;
  transition: all 0.2s ease-out 0s;
}
a{
  display:inline-block;
  width:100%;
  height:100%;
}
div:hover{
  margin-left:0px;
  width:390px;
  background-position:0 0;
  transition: all 0.2s ease-out 0s;
}