treehouse : what would you like to learn today?
Web Design Web Development iOS Development

I want to increase size of css3 border but not "move" the content at the same time.

  • The site is: www.andrewjilka.com

    If you look at the navigation I put a smooth little css3 animation in the nav items. Basically when you scroll over a link, the border-top increases from 5px to 10px smoothly then mouses-out. Cool!

    The problem I'm having is I don't want the text to shift down during that mouse over. The increase in border size pushes the block-item down 5px then back up. Is there someway to make that border increase in size without it "bumping" the content down?
  • I actually think it looks uber cool like that, but to answer your question, I don't know, negative margins upwards maybe?
  • I guess you could animate the top-margin of the same element from 0px to -5px over the same time interval.
  • use default top margine =5 and change it to Zero on hover.......
  • The simplest solution is to decrease the padding on hover by the same amount as you increase the border.

    Consider the box model, the padding is what is pushing your text down, not the margin.

    I also agree with @OniLinkCR, I think it looks pretty cool as it is.
  • Yep, sorry about that. Of course it's the padding.