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