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_1.png.2664aed019bf0fc85e268973151197d5.png.pagespeed.ic.-WMKR58Snt.webp') no-repeat;
}
#right a{
  display:inline-block;
  width:100%;
  height:100%;
}
#right div:hover{
  margin-left:0px;
  width:390px;
  background: url('https://htmlforum.io/uploads/monthly_2017_11/xbg_hover.png.6fbc7bc784ecfddc233039f337315ff8.png.pagespeed.ic.F8xE5CNAPB.webp') no-repeat;
}
#main {
  display: flex;
  justify-content: space-between;
  height: 300px;
  width: 100%;
}
#left {
  background: #999;
  width: 70%;
}
#right {
  width: 30%;
}