html, body {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: papayawhip;
}

.box {
	font-size: 10px;
	width: 20em;
	height: 6em;
	border: 0.2em solid black;
	text-align: center;
	font-family: sans-serif;
	overflow: hidden;
}

.box span {
	display: inline-block;
	font-size: 3em;
	line-height: 2em;
	color: blue;
	transition: 0.5s;
}

.box span:nth-child(odd) {transform: translateY(-100%);}
.box span:nth-child(even) {transform: translateY(100%);}

.box span::before {
	content: attr(data-text);
	position: absolute;
	color: red;
}

.box span:nth-child(odd)::before {transform: translateY(100%);}
.box span:nth-child(even)::before {transform: translateY(-100%);}

.box:hover span {
	transform: translateY(0);
}