JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropdown-menu">
<div class="col col-img">
  Col img
</div>
<div class="col col-menu">
<ul>
<li><a href="#" class="item-1">Item 1</a></li>
<li><a href="#" class="item-2">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>

</ul>
</div>
</div>

CSS

#a:hover + #b {
    background: #ccc
}

.dropdown-menu{
  display:flex;
  align-items:center;
  height:100vh;
}
.col{
  width:50%;
  padding: 20vw 10vw;
}
.col-img{
  background-image: url(https://www.chimerarevo.com/wp-content/uploads/2020/04/immagini-gratis.jpg);
  height:100vh;
  transition: 0.5s linear;
}

JavaScript

$(function() {
  $('.item-1').hover(function() {
    $('.col-img').css('background-image', 'url(https://i1.wp.com/www.giacomocusano.com/wp-content/uploads/2016/07/coastal-wash-web.jpg?fit=1024%2C682&ssl=1)');
  }, function() {
    // on mouseout, reset the background image
    $('.col-img').css('background-image', '');
  });
});
$(function() {
  $('.item-2').hover(function() {
    $('.col-img').css('background-image', 'url(https://www.chedonna.it/wp-content/uploads/2018/11/documentari.jpg');
  }, function() {
    // on mouseout, reset the background image
    $('.col-img').css('background-image', '');
  });
});