CSS hide top part of text - html

Question

I prefer CSS only solution; I can change HTML structure; Always only single line of text
TL;DR;
How to hide top part of text instead of bottom:
div {
overflow: hidden;
height: 11px;
}
<div>HOME</div>
Full example
I want to hide top of the text line so I can simulate transition effect:
div {
height: 20px;
width: 100px;
text-align: center;
}
div span {
display: block;
overflow: hidden;
transition: all 500ms ease-in-out;
height: 20px;
}
div .default {
color: black;
background-color: #f0f0f0;
}
div .hover {
height: 0;
color: white;
background-color: black;
}
div:hover .hover {
height: 25px;
}
div:hover .default {
height: 0px;
}
<div>
<span class="default">HOME</span>
<span class="hover">HOME</span>
</div>
As you can see in example .hover is currently sliding from bottom because text is hidden from bottom to top when height is reduced.
I want to hide text from top to bottom, so that it will look like same text is inverting it's color.

Answer 1

Are you against if I use pseudo elements to do it ? I play with bottom height to make it appears from top to bottom with the text in content property.
div .default {
display: block;
overflow: hidden;
height: 20px;
position: relative;
color: black;
background-color: #f0f0f0;
}
div .default:after { content: "Home"; position: absolute; left: 0; bottom: 100%; right: 0; background: #000; color: #fff; text-transform: uppercase; transition: all 500ms ease-in-out;}
div .default:hover:after { bottom: 0; }
HTML
<div>
<span class="default">HOME</span>
</div>
Like this
Other solution keeping the structure and avoid text in content property
<div>
<span class="default">HOME</span>
<span class="black">HOME</span>
</div>
CSS
div .black { position: absolute; left: 0; bottom: 100%; right: 0; background: #000; color: #fff; text-transform: uppercase; transition: all 500ms ease-in-out;}
div .default:hover ~ .black { bottom: 0; }
Fiddle with 2nd solution

Answer 2

I have solved that by using absolute positioned element over origin item:
div {
height: 20px;
width: 100px;
text-align: center;
position: relative;
}
div span {
display: block;
overflow: hidden;
transition: all 500ms ease-in-out;
height: 20px;
}
div .default {
color: black;
background-color: #f0f0f0;
/* ADDED */
position: absolute;
left: 0;
z-index: 10;
top: 0;
width: 100%;
height: 100%;
}
div .hover {
height: 20px;
color: white;
background-color: black;
}
div:hover .default {
height: 0px;
}
<div>
<span class="default">HOME</span>
<span class="hover">HOME</span>
</div>

Answer 3

Given your first example, this one hides top part of the text. Just play around with the line-height on your animation
Just add on your div span style:
line-height: 5px; /* play with the value till desired look is reached*/
https://jsfiddle.net/w0ydLg9h/