ll55 ll55 - 5 days ago 6
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

transformers
.

EDIT:

Thanks for @Mat' s solution.

I modified a bit so it looks much better:

https://jsfiddle.net/n80dn16o/2/

Mat Mat
Answer

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%;
}
Comments