JSFiddle - React, Tailwind, and code Playground

HTML

<div class="thumbnail-item">
        <a href="#"><img src="http://i.imgur.com/nKl8q.jpg" class="thumbnail"/></a>
        <div class="tooltip">
            <img src="http://i.imgur.com/XiDtL.jpg" alt="" width="330" height="185" />
            <span class="overlay"></span>
        </div> 
    </div> 
                    
    <div class="thumbnail-item">
        <a href="#"><img src="http://i.imgur.com/Q8Rnv.jpg" class="thumbnail"/></a>
        <div class="tooltip">
            <img src="http://i.imgur.com/aeJ1g.jpg" alt="" width="330" height="185" />
            <span class="overlay"></span>
        </div> 
    </div> 
    
    <div class="thumbnail-item">
        <a href="#"><img src="http://i.imgur.com/tjeLr.jpg" class="thumbnail"/></a>
        <div class="tooltip">
            <img src="http://i.imgur.com/62YkL.jpg" alt="" width="330" height="185" />
            <span class="overlay"></span>
        </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; 
}

.thumbnail-item img.thumbnail {
    border:3px solid #ccc;    
}
        
.tooltip { 
    /* by default, hide it */
    display: none; 
    /* allow us to move the tooltip */
    position: absolute; 
    /* align the image properly */
    padding: 8px 0 0 8px; 
}

    .tooltip span.overlay { 
        /* the png image, need ie6 hack though */
        background: url('http://i.imgur.com/Pie7g.png') no-repeat; 
        /* put this overlay on the top of the tooltip image */
        position: absolute; 
        top: 0px; 
        left: 0px; 
        display: block; 
        width: 350px; 
        height: 200px;
    }

JavaScript

// Load this script once the document is ready
    $(document).ready(function () {
        
        // Get all the thumbnail
        $('div.thumbnail-item').mouseenter(function(e) {

            // Calculate the position of the image tooltip
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;

            // Set the z-index of the current item, 
            // make sure it's greater than the rest of thumbnail items
            // Set the position and display the image tooltip
            $(this).css('z-index','15')
            .children("div.tooltip")
            .css({'top': y + 10,'left': x + 20,'display':'block'});
            
        }).mousemove(function(e) {
            
            // Calculate the position of the image tooltip            
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;
            
            // This line causes the tooltip will follow the mouse pointer
            $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});
            
        }).mouseleave(function() {
            
            // Reset the z-index and hide the image tooltip 
            $(this).css('z-index','1')
            .children("div.tooltip")
            .animate({"opacity": "hide"}, "fast");
        });

    });