JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">    
    <div class="images">
        <img src="http://lorempixel.com/400/200/" class="product-image" />        
    </div>    
    <div class="compareme"><h1>Compare Me</h1></div>    
    <div class="images">
        <img src="http://lorempixel.com/400/200/" class="product-image" />        
    </div>    
    <div class="compareme"><h3>Compare Me</h3></div>    
    <div class="images">
        <img src="http://lorempixel.com/400/200/" class="product-image" />        
    </div>    
    <div class="compareme"><h2>Compare Me</h2></div>    
</div>

CSS

.compareme{
    position:absolute;
    bottom:70px;
    left: 110px;
    height: 300px;
    width:100%;
    background:blue;
    display:none;
    text-align: center;
    margin-left: 25px;
    margin-right:30px;

    font-size:12px;


}

JavaScript

$('.product-image')
    .on('mouseenter', function(){
        $(this).parent().next().show();
    })
    .on('mouseleave', function(){
        $(this).parent().next().hide();
    });