JSFiddle - React, Tailwind, and code Playground

by ryanabennett

HTML

<div class="productbox">
  <div class="livitem">
    <div class="Livwidgetexpandimg">
      <a href="#"><img src="#" class="popupbox" /></a>
         <div class="popup"></div>
    </div>
   </div>
</div>
<div class="productbox">
  <div class="livitem">
    <div class="Livwidgetexpandimg">
      <a href="#"><img src="#" class="popupbox" /></a>
         <div class="popup"></div>
    </div>
   </div>
</div>

CSS

.productbox{
    float: left;
    height: 150px;
    margin-left: 5px;
    /*overflow: hidden;*/
    position:relative;
}

.livitem{
    float: left;
    position: relative;
    top: 3px;
}

.livitem:hover{
    background: yellow;
}

.livitem:hover .popupbox {
    position:absolute;
    top:15px;
    left:15px;
    z-index:51;
}

.Livwidgetexpandimg{
    background: blue;
    height: 75px;
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
    padding: 5px;
    width: 75px;
    float: left;
}

.popupbox{
    border: medium none;
    height: 75px;
    width: 75px;
}

.popup{
    background: yellow;
    display: none;
    float: left;
    /*height: 122px;*/
    /*margin-left: -10px;*/
    opacity: 0;
    /*width: 175px;*/
    z-index: 50;
    height: 106px;
    width:230px !important;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

$(function () {
        $('.livitem').each(function () {
            var distance = 10;
            var time = 200;
            var hideDelay = 1;
 
            var hideDelayTimer = null;
 
            var beingShown = false;
            var shown = false;
            var trigger = $('.Livwidgetexpandimg', this);
            var info = $('.popup', this).css('opacity', 0);
 
 
            $([trigger.get(0), info.get(0)]).mouseover(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;
 
                    info.css({
                        top: 10,
                        left: -3,
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }
 
                return false;
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });
 
                }, hideDelay);
 
                return false;
            });
        });
    });