JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.jacklmoore.com/js/jquery.zoom.js"></script>
<div class="bigPicture">
    <img src=""/>
</div>
<br/>
<ul class="smallPicture">
  <li><img src="http://www.funonthenet.in/images/pics/wildlife_in_the_amazon/20_wildlife-amazon-two-blue-poison.jpg" width="90"></li>
  <li><img src="http://rack.1.mshcdn.com/media/ZgkyMDE0LzAyLzEwL2VkLzEuQW1hem9uRGFuLjhjODAxLmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/4376b016/1e6/1.-Amazon-Danbo.jpg" width="90"></li>
</ul>

CSS

.bigPicture{
    display: block;
    height:80px;
    width:80px;
}

.smallPicture li{
    margin: 0;
    padding: 0;
    max-height:90px;
    max-width:90px;
    float: left;
    display: inline;
}

JavaScript

$( '.smallPicture li img' ).hover(function(){
    src = $(this).attr("src");
    $( '.bigPicture img' ).attr("src", src);
    
});
$( '.bigPicture img').hover(function(){
    src = $('.bigPicture img').attr("src");
    $('.bigPicture').zoom({url: src});
});