JSFiddle - React, Tailwind, and code Playground

HTML

<div class="design">
  <div class="zoom-preview">
    <div class="img_container" data-default_thumb="https://via.placeholder.com/300x200.png?text=Default+Thumbnail">
      <img id="imageToggleDef" src="https://via.placeholder.com/300x200.png?text=Default+Thumbnail" alt="" style="max-width: 100%; max-height: 100%" />
    </div>
  </div>
  <div class="menu cat_columns" id="cat-col-1">
    <ul class="hoverimage">
      <li class="menu-item" data-image="https://via.placeholder.com/300x200.png?text=Category+1"><a href="#">Category #1</a></li>
      <li class="menu-item" data-image="https://via.placeholder.com/300x200.png?text=Category+2"><a href="#">Category #2</a></li>
      <li class="menu-item" data-image="https://via.placeholder.com/300x200.png?text=Category+3"><a href="#">Category #3</a></li>
      <li class="menu-item" data-image="https://via.placeholder.com/300x200.png?text=Category+4"><a href="#">Category #4</a></li>
      <li class="menu-item" data-image="https://via.placeholder.com/300x200.png?text=Category+5"><a href="#">Category #5</a></li>
    </ul>
  </div><!-- .cat_columns -->
  <div class="menu cat_columns" id="cat-col-2">
    <ul class="hoverimage">
      <li class="menu-item" data-image="https://via.placeholder.com/300x200.png?text=Category+6"><a href="#">Category #6</a></li>
      <li class="menu-item" data-image="https://via.placeholder.com/300x200.png?text=Category+7"><a href="#">Category #7</a></li>
      <li class="menu-item" data-image="https://via.placeholder.com/300x200.png?text=Category+8"><a href="#">Category #8</a></li>
      <li class="menu-item" data-image="https://via.placeholder.com/300x200.png?text=Category+9"><a href="#">Category #9</a></li>
      <li class="menu-item"><a href="#">View All</a></li>
    </ul>
  </div><!-- .cat_columns -->
  <div class="clear"></div>
</div>

<hr />
<p style="text-align: right">
  <small>A fiddle by <a href="https://wordpress.stackexchange.com/users/137402/sally-cj" target="_blank">Sally</a></small>
</p>

CSS

.cat_columns {
	float: left;
	width: 35%;
}

.zoom-preview {
	float: left;
	width: 30%;
  text-align: center;
}

.clear {
	clear: both;
}

JavaScript

jQuery(function( $ ){
	var imageContainer = '.img_container',
		imageList      = '.hoverimage',
		maxWidth       = '100%', // parent or specific css width
		defImage       = $( '#imageToggleDef' ).attr( 'src' );

	var $imageContainer = $(imageContainer).eq(0);
	var $imageList      = $(imageList);

	if (maxWidth === 'parent') {
		maxWidth = $imageContainer.width() + 'px';
	}

	// Load images and set hover::
	$imageList.find('li[data-image]').each(function(index){
		if (typeof $(this).data('image') === 'string') {
			var thumb_url = $( this ).data( 'image' ) || defImage;
			$imageContainer.append(
				"<img id='imageToggle"+index+
				"' src='"+ thumb_url +
				"' style='max-width: "+maxWidth+"; max-height:100%; display:none;' />"
			);
			$(this).data("image","imageToggle"+index);
			$(this).hover(
				function(){ loadImage($(this).data('image')); },
				function(){ loadImage('imageToggleDef'); }
			);
		}
	});

	// Load default:
	/* You should manually add <img id="imageToggleDef".../> in the preview's wrapper.
	$imageContainer.append(
		"<img id='imageToggleDef"+
		"' src='"+defImage+
		"' style='max-width: "+maxWidth+"; max-height:100%' />"
	);
	*/

	// Toggle images:
	function loadImage(imageId) {
		$imageContainer.stop(true).fadeOut('fast', function(){
			$(this).find('img').hide();
			$(this).find('img#'+imageId).show();
			$(this).fadeIn('fast');
		});
	}
});