样式 - 当 td 通过动画改变其宽度时设置文本的外观

Question

最近，我发现我的导航菜单选项卡太少。因此，我打算默认隐藏选项卡中的文本，并在悬停选项卡时显示文本。但是文本会立即显示，甚至会破坏标签扩展动画。
这就是我想要的：http://i.imgur.com/XEJl9sW.gif，以及隐藏文本。
有人可以帮我解决吗？谢谢。
PS：CSS 优先于 JS。
gif 中的文字意思是transformers。

编辑：
感谢@Mat 的解决方案。
我稍微修改了一下，看起来好多了：
https://jsfiddle.net/n80dn16o/2/

Answer 1

您应该将文本和 img 设置在绝对块内。 在下面找到一个工作示例：https://jsfiddle.net/zh6z2jmq/11/

td.locale-text p{
  padding:0;
  margin:0;
  position:absolute;
  width:100%;
}