Search code examples
csscss-transitionscss-animationsmousehover

CSS transition issue with horizontal scroll list items

I have horizontal list with list items. If you hover the mouse on it, it expands horizontally to make space to show more infos (not implemented)

However I can't figure out why the items are moving down when i hover over it.

https://embed.plnkr.co/51WuwdhmH7yS3pSnkqFY/

(The overlapping thing is just is just plunker i guess)

Thanks!

Solution

  • This problem has a very simple fix: in your CSS add vertical-align: top; to .thread-item. This will keep the elements on top at all time ;)