JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnail-item" >
    <img src="http://2.bp.blogspot.com/-2iYfTLCWkZs/UHRXslLnd7I/AAAAAAAAM7Q/yt5WQiFFTL0/s320/FREE.jpg" width="150px" height="150px"/>
    <div class="tooltip">
        <img src="http://bitsquad.co.in/wp-content/uploads/2012/03/1freehosting.com-red-main-logo.png" />
    </div> 
</div>
<div class="thumbnail-item">
     <img src="http://www.freecoupons.com/wp-content/uploads/2010/04/free-tag.jpg" width="150px" height="150px"/>
    
    <div class="tooltip">
        <img src="http://www.neurosciencemarketing.com/blog/wp-content/photos/free.jpg" />
    </div> 
</div>

CSS

.thumbnail-item { 
    /* position relative so that we can use position absolute for the tooltip */
    position: relative; 
    float: left;  
    margin: 0px 5px; 
}

.thumbnail-item a { 
    display: block; 
}

     
.tooltip { 
    /* by default, hide it */
    display: none; 
    /* allow us to move the tooltip */
    position: absolute; 
    /* align the image properly */
    /*padding: 8px 0 0 8px; */
    /*top:-10px;
    right:0px;*/
}

JavaScript

$('div.thumbnail-item').mouseenter(function(e) {
      
        var windowsHeight = $(window).height();
        var halfwindowwidth = $(window).width() * 0.5;


        //if(i== 1){
        var childImage = $(this).children("div.tooltip");
        
        if (childImage.attr('saveWidth') == ""){
            //we haven't saved it's height yet
            childImage.attr('saveWidth', childImage.width()); 
            childImage.attr('saveHeight', childImage.height());
        }

        var hoverImgWidth = childImage.attr('saveWidth');
        var finalHoverImagewidth = hoverImgWidth * 0.75;


        var hoverImgHeight = childImage.attr('saveHeight');
        var finalHoverImageWidth = hoverImgHeight * 0.75;
        //}
        //console.log(i);
       
        



        $(this).css('z-index', '100').children("div.tooltip")
        //.css({'top': y + 10,'left': x + 20,'display':'block'})
        .css({
            'left': 0,
            'top': -10
        }).delay(800).fadeIn('slow').find('img').css({
            'width': finalHoverImagewidth,
            'height': finalHoverImageWidth
        });
        
    
    }).mouseleave(function() {

    $(this).css('z-index', '1').children("div.tooltip").animate({
        "opacity": "hide"
    }, "fast").hide().clearQueue();
});