Forums

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

Home Forums CSS Centering elements with transitions

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #35108
    Catasphere
    Member

    I basically have a header with a background color that stretches vertically infinitely in it’s parent’s container that I want to shrink when hovered over. I’m having trouble getting the desired effect ─ when I hover over the header, it shrinks but aligns to the left. How do I get the background color to shrink without de-centering the header?

    Here’s an example in JSFiddle: http://jsfiddle.net/Catasphere/LdSHB/

    #90413
    Catasphere
    Member

    Thank you! It works! But there’s a defect, I don’t know if it’s just because of my browser/setup, but after I move my cursor off the element, it snaps to the left and then centers again… is there a way to remove that?

    Here’s a demo: http://cl.ly/320I3r2g421I2x2X1m0f

    ( Excuse the audio in the demo, I didn’t know it was recording my music :P )

    #90449
    Catasphere
    Member

    Yeah sure! It’s just a demo, but here’s what I have so far.

    HTML: http://cl.ly/1Y210P2v2z3f0u3j0000
    CSS: http://cl.ly/1k30451i3d1z1q230w1F
    Reset: http://cl.ly/3z2b1D0r0P2L2m3J2E34

    #90495
    Catasphere
    Member

    Bump!

    #90496

    What browser are you using? @stevencrader’s solution is the correct one, I can’t replicate your issue with it.

    #90497
    Catasphere
    Member

    I’m using Firefox 8. I’ve replicated it with Chrome and Safari, though… This is weird.

    #90498

    Ok, try this instead, apply the effect directly to the h1 element. It is block level by nature (100% width). Here is the fiddle: http://jsfiddle.net/sl1dr/DcR7E/

    #90507
    Catasphere
    Member

    That killed the bug! Thank you! So it’s more effective to target the h1 element instead of the whole header wrapper?

    #90508

    Well you were essentially targeting (and styling) a wrapper element. It makes much more sense to target the element directly.

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