You have ‘taxonomy’ => ‘product_cat’ in your code, so most likely you have Woocommerce, and we need to get a category picture from there.
Try this code
<?php $args = array(
'taxonomy' => 'product_cat',
'title_li' => '',
'hide_empty' => 0,
'echo' => 0,
'show_count' => 0,
'style' => '',
'parent' => 0
);
$get_cats = get_terms( $args );
?>
<div class="design">
<div class="menu">
3 menu options will be in this div and when we hover at each link an image must appear to the right with fast zoom in effect like shooting.
<ul class="hoverimage">
<?php
foreach ( $get_cats as $cat ) {
$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );
if($image == "") {
$image = get_bloginfo('url') . '/wp-content/uploads/2019/06/Logo-02-02.jpg';
}
?>
<li class="menu-item" data-image="<?php echo $image; ?>"><a href="https://wordpress.stackexchange.com/questions/352219/<?php echo get_term_link( $cat ); ?>"><?php echo $cat->name; ?></a></li>
<?php
}
?>
</ul>
</div>
<div class="zoom-preview">
image will appear here when we hover at each link at the left. each link it's own image.
Also there must be a default image here when we do not hover at any link at the left.
<div class="img_conatainer">
</div>
</div>
<div class="clear"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
$(function(){
var imageContainer=".img_conatainer",
imageList=".hoverimage",
maxWidth="parent", // parent or specific css width/
defImage="http://cdn.instructables.com/FEB/Q2RO/H9G190RM/FEBQ2ROH9G190RM.LARGE.jpg";
var $imageContainer = $(imageContainer).eq(0);
var $imageList = $(imageList).eq(0);
if (maxWidth === 'parent') { maxWidth = $imageContainer.width() + 'px'; }
//Load images and set hover::
$imageList.find('li').each(function(index){
if (typeof $(this).data('image') === 'string') {
$imageContainer.append(
"<img id='imageToggle"+index+
"' src=""+$(this).data("image')+
"' style="max-width: "+maxWidth+"; display:none;" />"
);
$(this).data("image","imageToggle"+index);
$(this).hover(
function(){ loadImage($(this).data('image')); },
function(){ loadImage('imageToggleDef'); }
);
}
});
//Load default:
$imageContainer.append(
"<img id='imageToggleDef"+
"' src=""+defImage+
"" style="max-width: "+maxWidth+"" />"
);
//Toggle images:
function loadImage(imageId) {
$imageContainer.stop(true).fadeOut('fast', function(){
$(this).find('img').hide();
$(this).find('img#'+imageId).show();
$(this).fadeIn('fast');
});
}
});
</script>