JSFiddle - React, Tailwind, and code Playground

by nadeemmnn2007

HTML

<h3>Thumbs</h3>

<img class="thumb-img" src="https://s-media-cache-ak0.pinimg.com/236x/5a/42/c6/5a42c6224e3ce7fa9837965270bfcdd9.jpg" />
<img class="thumb-img" src="http://rlv.zcache.com/fun_yellow_smiley_face_with_handlebar_mustache_sticker-rea187dba0bdc47a18c9036fbaab21128_v9waf_8byvr_512.jpg?bg=0xffffff" />
<img class="thumb-img" src="http://images.clipartpanda.com/clipart-smiley-face-smiley_face_13.png" />
<hr>

<h3>banner</h3>

<img id="banner" src="http://rlv.zcache.com/fun_yellow_smiley_face_with_handlebar_mustache_sticker-rea187dba0bdc47a18c9036fbaab21128_v9waf_8byvr_512.jpg?bg=0xffffff" />

CSS

img {
    height:100px;
}
.thumb-img{
    cursor:pointer;
}
.thumb-img:hover{
    border: red solid 1px;
}

JavaScript

//use a class rather than an ID to bind the click event
$('.thumb-img').click(function () {
    //gets the source of the thumbnail
    var source = $(this).attr('src');
    $("#banner").fadeOut(function () {
        //fades banner out and upon completion changes source image and fades in.
        $(this).attr("src", source);
        $(this).fadeIn();
    });
});