ll55 ll55 - 9 months ago 60
CSS Question

Styling - setting appearance of text when td is changing its width with its animation

Recently, I found out that my navigation menu has too few tabs. Therefore, I was going to hide the texts in tabs by default and let the texts appear when hovering a tab. But the texts shows instantly and even breaks the tab expanding animation.

This is what I want: http://i.imgur.com/XEJl9sW.gif, as well as hiding the text too.

Can someone help me with a solution please? Thanks.

PS: CSS is preferred to JS.

The words in the gif means



Thanks for @Mat' s solution.

I modified a bit so it looks much better:


Mat Mat
Answer Source

You should set the text and the img inside an absolute block. Find below a working exemple : https://jsfiddle.net/zh6z2jmq/11/

td.locale-text p{