Grow your CSS skills. Land your dream job.

Expanding elements outside the flow of the document

  • # February 5, 2013 at 4:54 pm

    Hi all,

    I have a page list I’m working on, reduced test case [here](http://codepen.io/ChrisPlz/pen/xnCdB “”).

    I’m trying to make it so the height of the element expands without effecting the normal flow of the document, and without using absolute positioning on the element _in the non-hover state_. Since this is a page list, there will be pages added on a regular basis.

    I’m basically looking for the green line to remain unchanged.

    Scratching my head over how to do this with just CSS..in the pen, I’ve settled on a negative margin to compensate for the adjusted height, but I doubt that’s the best option.

    Any suggestions would be greatly appreciated.

    # February 5, 2013 at 5:49 pm

    Hey Chris,

    This is as close as I can get: http://cdpn.io/GKIJp

    It’s hackish, and the background image wobbles a bit (something I probably could have remedied if I was better at math), but it works.

    Rather than animating the height, I’m scaling the box to 2x its height. Then I’m scaling the background image and the link in the opposite direction, so that they don’t look stretched.

    Probably not the greatest way to do this, but it’s one way. Hope it helps!

    # February 5, 2013 at 7:51 pm

    Thanks @howlermiller, I’ll definitely look into this. I’d really like to find a way that has some flexibility, as far as picture dimensions go. I think this will definitely help point me in the right direction though

    # February 5, 2013 at 8:22 pm

    Yeah, that’s a problem. You could do it with JS of course, but it would be really sweet to find a CSS solution. I’ll keep this in mind, and maybe come up with something better (if you don’t beat me to it).

    Glad I could help!

    # February 5, 2013 at 8:35 pm

    So, I took @howlermiller‘s advice, and came up with this:

    http://cdpn.io/xnCdB

    Unfortunately, I lose the transition shading, but at least it’s something.

    # February 5, 2013 at 9:30 pm

    Hey, looking good! You can bring the transition shading back with a pseudo element: http://cdpn.io/HbFpw

    Unfortunately, as cool as the pseudo element thing is, the transition only works in Firefox and Chrome > 25 (due to this bug). I figured it was worth mentioning though, since you’re already using a lot of cutting-edge stuff.

    # February 5, 2013 at 9:41 pm

    Yea, I was going to try a pseudo element it but stopped early because of the lack of transition support.

    Now that I think I got something, I think I might just change the html in my page list template around to accommodate the shaded transition.

    Thanks again for your help @howlermiller

    # February 5, 2013 at 11:29 pm

    There you go. My pleasure!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".