JSFiddle - React, Tailwind, and code Playground

by bhatnagar018

HTML

<div>
    <div id="show">
        <ul id="ticker_01" class="ticker">
            <li>Text 1</li>
            <li>Text 2</li>
        </ul>
    </div>
    <div id="up">Hover Text</div>
</div>

CSS

.ticker {
    width:70px;
    height: 20px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 5px;
    /*-moz-box-shadow: 7px 7px 5px #888;
-webkit-box-shadow: 7px 7px 5px #888;
box-shadow: 7px 7px 5px #888;*/
    background-color:red;
}
#up {
    overflow: hidden;
    color:rgba(255, 255, 255, 0.7);
    margin: 0;
    padding: 0;
    width:70px;
    height:0px;
    bottom: 0px;
    background-color:orange;
    opacity:0.7;
    z-index:2;
    top: -15px;
    border-radius: 5px;
    position: absolute;
    display: block;
}

JavaScript

$('#ticker_01').mouseover(function () {
    //alert("hi");
    $('#up').animate({
        height: "20px",
        top: "8px"
    });
});

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