样式 - 当 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%;
}