JSFiddle - React, Tailwind, and code Playground

by bhatnagar018

HTML

<div id="all">
    <div id="show">Text1</div>
    <div id="up"><a href="#">Hover Text</a>

    </div>
</div>

CSS

#all {
    width:100px;
    height:100px;
}
#show {
    width:100px;
    height:100px;
    background-color:green;
}
#up {
    width:100px;
    height:20px;
    top:110px;
    background-color:orange;
    position:absolute;
    opacity:0;
}

JavaScript

$('#show').mouseover(function () {
    $('#up').animate({
        height: "100px",
        top: "8px",
        opacity: "1"
    }, 'slow');
});

$("#up").mouseout(function () {
    $('#up').animate({
        top: "110px",
        height: "20px",
        opacity: "0"
    }, 'slow');
});