Search code examples
htmlcssanimationshow-hide

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 transformers.

EDIT:
Thanks for @Mat' s solution.
I modified a bit so it looks much better:
https://jsfiddle.net/n80dn16o/2/

Solution

  • 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{
  padding:0;
  margin:0;
  position:absolute;
  width:100%;
}