JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="left">
    </div>
    <div id="right">
        <div>
          <a href="#"></a>
        </div>
        <div>
          <a href="#"></a>
        </div>
        <div>
          <a href="#"></a>
        </div>
    </div>
</div>

CSS

#right 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;
}
#right a{
  display:inline-block;
  width:100%;
  height:100%;
}
#right div:hover{
  margin-left:0px;
  width:390px;
  background-position:0 0;
  transition: all 0.2s ease-out 0s;
}
#main {
  display: flex;
  justify-content: space-between;
  height: 300px;
  width: 100%;
}
#left {
  background: #999;
  width: 70%;
}
#right {
  width: 30%;
}