Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS I want to increase size of css3 border but not “move” the content at the same time.

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #33315
    biklops
    Participant

    The site is: http://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?

    #82610
    OniLinkCR
    Member

    I actually think it looks uber cool like that, but to answer your question, I don’t know, negative margins upwards maybe?

    #82612
    AntonNiklasson
    Participant

    I guess you could animate the top-margin of the same element from 0px to -5px over the same time interval.

    #82613
    jitendrac
    Member

    use default top margine =5 and change it to Zero on hover…….

    #82654
    AntonNiklasson
    Participant

    Yep, sorry about that. Of course it’s the padding.

    #238160
    jorgenrique
    Participant

    Use :before for creating the border, that way you can handle it as an independent element.
    http://codepen.io/jorgenrique/pen/JGqOMb

    #238161
    Paulie_D
    Member

    Necro post….really?

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.