JSFiddle - React, Tailwind, and code Playground

HTML

<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">
               <li class="menu-item" data-image='http://cdn.instructables.com/FNK/CXB1/H9G190RO/FNKCXB1H9G190RO.MEDIUM.jpg'>
           <a href="#">menu option</a></li>
               <li class="menu-item" data-image='http://cdn.instructables.com/F6E/CTDW/H9G190RP/F6ECTDWH9G190RP.LARGE.jpg'>
           <a href="#">menu option</a></li>
              <li class="menu-item" data-image='http://cdn.instructables.com/F8B/YMOT/H9G190RL/F8BYMOTH9G190RL.LARGE.jpg'>
           <a href="#">menu option</a></li>
       </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>

CSS

.design {
    border: 1px solid;
    width: 570px;
    padding: 10px;
    background: #fcdcdc;
    
}
.menu {
    float: left;
    width:  300px;
}
.zoom-preview {
    float: left;
    margin-left: 10px;
    width:  250px;
}
.clear {
    clear:both;
}
.menu li {
    list-style: none;
    padding-bottom: 10px;
    background:lightgrey;
    width:90px;
}

JavaScript

$(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');
        });
    }

});