JSFiddle - React, Tailwind, and code Playground

by bhatnagar018

HTML

<div class="container">
    <div class="base">Your Text Here
        <div id="up"> <a href="www.google.com">Google me !!! </a>
This is your product</div>
    </div>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <div class="base">Your Text Here
        <div id="up"> <a href="www.google.com">Google me !!! </a>
This is your product</div>
    </div>
</div>

CSS

.container {
    padding:1%;
}
.base {
    border:1px solid black;
    border-radius:2px 2px 2px 2px;
    height:100px;
    width:100px;
    position:relative;
    float:left;
}
#up {
    background:black;
    z-index:1;
    height:20px;
    width:100px;
    opacity:0;
    bottom:0;
    position:absolute;
}

JavaScript

$(".base").mouseover(function () {
        $("#up").css("color", "white");
        $("#up").animate({
            height: "60px",
            opacity: "0.5"
        });
    });
    $(".container > div").mouseleave(function () {
        $("#up").animate({
            height: "20px",
            opacity: "0",
        });
    });