JSFiddle - React, Tailwind, and code Playground

HTML

<div id="image-container">
<img id="image" src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Cairo_International_Stadium.jpg/220px-Cairo_International_Stadium.jpg" />
</div>

CSS

.kiyuras-image {
    position: absolute;
    top: 8px;
    left: 8px;
    max-width: 220px;
}

.large-image-container{
    position:absolute;
    top: 0px;
    max-width: 400px;
}

.loading{
    background-color : white !important;
    opacity : 0.5;
    background-image : url('http://bouffee-oxygene.touriloire.fr/comresweb/images/loading.gif');
    background-repeat:no-repeat;
    background-position:center; 
    background-size:80px 60px;
}

JavaScript

$(function () {

    var fullimageurl = 'http://upload.wikimedia.org/wikipedia/commons/3/32/Cairo_International_Stadium.jpg';

    $imageContainer = $("#image-container");    
    $imageContainer.on({
        mouseenter: function (event) {    
           //Add a loading class
           $imageContainer.addClass('loading');
           
           //Insert div (for styling) containing large image            
           $(this).append('<div><img class="large-image-container" id="'+this.id+'-large" src="'+fullimageurl+'" /></div>');
           
           //Append large image load callback            
           $('#'+this.id+'-large').load(function() {
               $imageContainer.removeClass('loading');
               //alert ("The image has loaded!");        
           });
        },            
        mouseleave: function (event) {
           //Remove loading class
           $(this).removeClass('loading');
           //Remove div with large image 
           $('#'+this.id+'-large').remove();          
        }        
    });
    

});