JSFiddle - React, Tailwind, and code Playground

by Ronny Amarante

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.internationalrivers.org/files/styles/600-height/public/images/campaign/admin-old/amazon.jpg?itok=rz1JSSBO" height="90" width="90"></li>
         <li><img src="http://www.funonthenet.in/images/pics/wildlife_in_the_amazon/20_wildlife-amazon-two-blue-poison.jpg" height="90" width="90"></li>
              <li><img src="http://rack.1.mshcdn.com/media/ZgkyMDE0LzAyLzEwL2VkLzEuQW1hem9uRGFuLjhjODAxLmpwZwpwCXRodW1iCTk1MHg1MzQjCmUJanBn/4376b016/1e6/1.-Amazon-Danbo.jpg" height="90" width="90"></li>
</ul>

CSS

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

.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});
});