JSFiddle - React, Tailwind, and code Playground
HTML
<li>
<img src="http://mlb-s2-p.mlstatic.com/adesivo-parede-infantil-mickey-donald-pateta-disney-baby-16663-MLB20124000600_072014-F.jpg"/>
</li>
<li class="hoverDiv">
<img src="http://mlb-s2-p.mlstatic.com/adesivo-parede-infantil-mickey-donald-pateta-disney-baby-16663-MLB20124000600_072014-F.jpg"/>
</li>
CSS
li {
position: relative;
list-style:none;
display:inline-block;
margin: 10px;
}
li img {
height:100px;
width:100px;
}
div.loading {
position: absolute;
top:0;
left:0;
background: url('http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif') no-repeat center center;
height:100px;
width:100px;
}
JavaScript
$('li').on('mouseenter', function(){
$(this).append('<div class="loading"></div>');
});
$('li').on('mouseleave', function(){
$(this).find('div.loading').remove();
});