JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    	<div id="content"></div>
    </div>

CSS

#container{
		position:relative;
		width:100px;
		height:100px;
		border-style:inset;}
		#content{
			visibility:hidden;
			-webkit-animation:animDown 1s ease;
			position:absolute;
			top:100px;
			width:100%;
			height:100%;
			background-color:lightgreen;}
		#container:hover #content{
			-webkit-animation:animUp 1s ease;
			animation-fill-mode:forwards;
			-webkit-animation-fill-mode:forwards;}
@-webkit-keyframes animUp{
	0% {
		-webkit-transform:translateY(0);
		visibility:hidden;
		opacity:0;}
	100% {
		-webkit-transform:translateY(-100%);
		visibility:visible;
		opacity:1;}
}
@-webkit-keyframes animDown{
	0% {
		-webkit-transform:translateY(-100%);
		visibility:visible;
		opacity:1;}
	100% {
		-webkit-transform:translateY(0);
		visibility:hidden;
		opacity:0;}
}