JSFiddle - React, Tailwind, and code Playground

by Joseph Tate

HTML

<div class="box">
<div id="stay-in-place">
	<h1>hello world</h1>
	<p>ipsum dolorum caveat emptor veni vidi vici</p>
</div>

<div id="move-in-to-place">
	<h2>I'm on top</h2>
</div>
</div>

CSS

#stay-in-place {
    height: 100%;
    width: 100%;
    background: red;
    position: absolute;
}
#move-in-to-place {
    position: absolute;
    bottom: -100%;
    height : 100%;
    width : 100%;
    background: blue;
    opacity:0;
    height:0;
}
.box {
    position: relative;
    width:200px;
    height:200px;
    overflow:hidden;
}
.box:hover #move-in-to-place {
    bottom: 0;
    -webkit-transition: all 1s, -webkit-transform 1s;
    transition: all 1s, transform 1s;
    width:100%;
    height:100%;
    opacity:1;
}