JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainDiv"><div class="main-img-container"><img id='mainImage' src="http://t1.gstatic.com/images?q=tbn:ANd9GcR2hsM5gBoMh5sjUjYKd8PnDeqHLGF8ZMeSXK0Q5D6cd9qowMZ2"/></div></div>

<br/><br/>

<ul>
    <li>
        <div class="img-container"><img src="http://t1.gstatic.com/images?q=tbn:ANd9GcR2hsM5gBoMh5sjUjYKd8PnDeqHLGF8ZMeSXK0Q5D6cd9qowMZ2"/></div>
    </li>
    <li>
        <div class="img-container"><img src="http://lisathatcher.files.wordpress.com/2013/04/rainbow.jpg"/></div>
    </li>
    <li>
        <div class="img-container"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcSHNQmo0tVIv2CNOeWWt2T9P0LM3SzciIGhRHw9jOYDqcfjx-tv"/></div>
    </li>
</ul>

CSS

#mainImage{
    width:300px;
    height:300px;
    -webkit-transition:all 0.5s linear;
    transition:all 0.5s linear;
}
ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
li{
    list-style-type:none;
    float:left;
}
.img-container img {
    width:100px;
    height:100px;
}

JavaScript

var mainImage = $("#mainImage");
$(".img-container img").hover(function(){
   var src = $(this).attr("src");
    $("#mainImage").attr("src",src);
});

mainImage.on("click",function(){
    $(this).css("transform","scale(2)");
});