- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
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.
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?
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…….
Yep, sorry about that. Of course it’s the padding.
Use :before for creating the border, that way you can handle it as an independent element.
http://codepen.io/jorgenrique/pen/JGqOMb
Necro post….really?