JSFiddle - React, Tailwind, and code Playground

by notjoelshapiro

HTML

<div id="frame">
<div id="image"></div>
<div id="outer2">
    <div id="outer">
        <div id="holder">
            <p>text</p>
        </div>
    </div>
</div>
</div>

CSS

p{
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    background: red;
}
#frame{
    position: relative;
}
#frame:hover #holder{
    margin-top: -100%;
}
#image{
    width: 200px;
    height: 200px;
    background: black;
}
#outer2{
    position: absolute;
    bottom: 0px;
}
#holder{
    margin-top: 0%;
    width: 100%;
}
#outer{
    position: absolute;
    top: 0px;
}