スタイリング - tdがアニメーションでその幅を変更したときのテキストの外観を設定します

Question

最近、ナビゲーションメニューのタブが少なすぎることがわかりました。したがって、私はデフォルトでタブ内のテキストを隠し、タブをホバリングするときにテキストを表示させようとしていました。しかし、テキストは即座に表示され、タブ展開アニメーションを分割することさえできます。
これは私が欲しいものです：http://i.imgur.com/XEJl9sW.gif、そしてテキストも隠しています。
誰かが解決策を教えてくれますか？ありがとう。
PS：CSSはJSよりも優先されます。
gifの単語の意味は transformersです。

編集：
@Matのソリューションをありがとう。
それははるかに良く見えるように、私は少し修正：
https://jsfiddle.net/n80dn16o/2/

Answer 1

をあなたは絶対ブロック内のテキストおよびIMGを設定する必要があります。作業exempleの下 検索：コードの助けを求めるhttps://jsfiddle.net/zh6z2jmq/11/

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