JSFiddle - React, Tailwind, and code Playground

by notjoelshapiro

HTML

<div id="frame">
<div id="outerHold">
    <div id="hold"><p>Texts Texts Texts Texts Texts Texts Texts Texts Texts Texts</p></div>
</div>
</div>

CSS

p{
    margin: 0px;
    padding: 0px;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
}
#frame{
    height: 200px;
    width: 200px;
    position: relative;
    background: blue;
    overflow: hidden;
}
#frame:hover #hold{
    margin-bottom: 0%;
    opacity: 1;
}
#outerHold{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
#hold{
    margin-bottom: -100%;
    width: 100%;
    background: yellow;
    opacity: 0;
    transition: margin-bottom 500ms, opacity 1300ms;
    -webkit-transition: margin-bottom 500ms, opacity 1300ms;
    -moz-transition: margin-bottom 500ms, opacity 1300ms;
    -o-transition: margin-bottom 500ms, opacity 1300ms;
}