Hide additional elements in CSS - html

Question

I want to show a text animation where the second text moves in from the bottom and the first text moves out to the top. Here's the basic HTML structure:
<span style="position: relative; overflow: hidden; padding-right: 100px;">
<span style="display: block; position: absolute; left: 0px; top: 0px;">Text1</span>
<span style="display: block; position: absolute; left: 0px; top: 20px;">Text2</span>
</span>
Animation and layout details are left out for brevity.
Update: Here's a complete example for you to play with: http://jsfiddle.net/xpvt214o/577089/
My main issue is that the outside element should not be visible, but it is. The overflow property has no effect at all. How can I solve this?
The outer span element is inline because it flows in other text. Only parts of the sentence should swap out. And the animating text must be properly aligned with the rest of the sentence. inline-block for the outer element doesn't do that.
The clipping must also apply during the animation of the inner elements (transition: top 0.5s).
I've found the CSS properties clip and clip-path. The former being deprecated (and it doesn't work, too) and the latter being experimental and not supported in all required browsers (and it also fails in Firefox).

Answer 1

You have to use either inline-block or block in order to get the clipping to work. The thing is: if you have a blocky element that only contains absolutely positioned childs or is empty, it wont have any dimension - you have to set this manually. Try:
<span style="display: inline-block; position: relative; overflow: hidden; padding-right: 100px; height: 1.2em; line-height: 1.2em; vertical-align: bottom;">
<span style="display: block; position: absolute; left: 0px; top: 0px;">Text1</span>
<span style="display: block; position: absolute; left: 0px; top: 20px;">Text2</span>
</span>

Answer 2

I'm not sure why you are using inline CSS and SPANs for this but I think I've got the answer for you. Please check my solution and let me if you are not clear about it.
You can do this just using one element, using pseudo elements and nothing else. And SPAN is an inline element so you can assign inline-block to it.
Regards,
AB
.hover-text {
display: inline-block;
background-color: grey;
color: transparent;
color: white;
padding: 10px 25px;
position: relative;
overflow: hidden;
}
.hover-text:before {
content: 'Text 1';
padding: inherit;
position: absolute;
left: 0;
top: 0%;
background-color: inherit;
transition: 0.2s ease all;
}
.hover-text:after {
content: 'Text 2';
padding: inherit;
position: absolute;
left: 0;
bottom: -100%;
background-color: red;
transition: 0.2s ease all;
}
.hover-text:hover:before {
top: -100%;
}
.hover-text:hover:after {
bottom: 0%;
}
<span class="hover-text">Text 1</span>