JSFiddle - React, Tailwind, and code Playground

by Silvestrs Kante

HTML

<div id="container">
    <div class="smart">
        <p id="infoleft">I AM INFO</p>
    </div>
    <div class="smart">
        <p id="infoleft">SO AM I</p>
    </div>
    <div class="smart">
        <p id="infoleft">ME TOO</p>
    </div>
    <div class="smart">
        <p id="infoleft">WHAT IS HAPPENING</p>
    </div>
</div>

CSS

#container {
    margin: 0 auto;
    width: 75%;
}
.smart {
    display: inline-block !important;
    height: 200px;
    width: 200px;
    background: black;
    position: relative;
    overflow: hidden;
}
.hidden {
    display:none;
}
#infoleft {
    top: -200px;
    margin: 0 auto;
    height: 200px;
    width: 200px;
    z-index: 10;
    color: #fff;
    font-size: 30px;
    font-family: Helvetica;
    font-weight: bold;
    position: absolute;
}

JavaScript

$(document).ready(initialize)

function initialize() {
    $(".smart").hover(function (e) {
        var getQuadrantThis = getQuadrant.bind(this)
        var slideInfoThis = slideInfo.bind(this)
        slideInfoThis(getQuadrantThis(e))
    })
}

function slideInfo(slideDirection) {
    var parent = $(this)
    var info = parent.children("p")
    console.log(slideDirection)
    switch (slideDirection) {
        case 'top':
            if (parent.is(':hover')) 
                info.css({
                    'left': 0,
                    'top': -200
                }).stop().animate({
                    'left': 0,
                    'top': 0
                })
            else 
                info.stop().animate({
                    'left': 0,
                    'top': -200
                })
            break;
        case 'right':
            if (parent.is(':hover')) 
                info.css({
                    'left': 200,
                    'top': 0
                }).stop().animate({
                    'left': 0,
                    'top': 0
                })
            else 
                info.stop().animate({
                    'left': 200,
                    'top': 0
                })
            break;
        case 'bottom':
            if (parent.is(':hover')) 
                info.css({
                    'left': 0,
                    'top': 200
                }).stop().animate({
                    'left': 0,
                    'top': 0
                })
            else 
                info.stop().animate({
                    'left': 0,
                    'top': 200
                })
            break;
        case 'left':
            if (parent.is(':hover')) 
                info.css({
                    'top': 0,
                    'left': -200
                }).stop().animate({
                    'left': 0,
                    'top': 0
                })
            else 
                info.stop().animate({
          ...