Grow your CSS skills. Land your dream job.

Sliding Div on hover with dynamic contents

  • # April 13, 2013 at 7:15 am

    Hi gang,

    I want to have a Div (call it ‘Wrapper’) with another Div inside (call it ‘Contents’), and Contents gradually expands when Wrapper or Contents is hovered over. Contents starts at height 0, and expands to a certain height.

    However, I’ve no idea what that height will be! So I can’t just use a CSS thing of on hover adjust to a certain size…

    Please can you help? Thanks a lot ahead of time for any answers!

    # April 13, 2013 at 7:35 am

    Check [this](http://codepen.io/alex13/pen/qDycl “”).

    # April 13, 2013 at 10:20 am

    Without JavaScript, I don’t know if it’s possible. You can set `height: auto;` on hover like this: http://jsfiddle.net/N8mEK/, but you can’t use transitions on a property with ‘auto’ value. Not sure if you wanted it to expand smoothly or not though :)

    # April 13, 2013 at 11:38 am

    @CodeGraphics: link doesn’t work (503 error)! Please could you put the solution in JSFiddle for me?

    @Crocodillon: That’s ace, thanks pal! I was kind of hoping for smooth transitions, and am happy for a JavaScript solution.

    # April 13, 2013 at 12:35 pm

    CodePen seems down, just wait till it’s back up and you’ll be able to see CodeGraphics Pen… I guess.

    JavaScript with jQuery is easy enough: http://jsfiddle.net/N8mEK/1/

    # April 13, 2013 at 1:23 pm

    You could maybe set it to some reasonable height and apply overflow auto and if the content height is greater than height of the box you could scroll through it. Don’t know how useful that would be tho. [Here's the link...](http://jsfiddle.net/Z8wve/21/ “”)

    # April 13, 2013 at 2:52 pm

    That’s cool CrocoDilloBro, thanks a lot for doing that.

    One thing I can’t help but notice is that if you start the slide, move your mouse away, and then move it over again that it freezes mid anim. It seems to do this regardless of if I include the stop or not.

    Any ideas?

    # April 13, 2013 at 2:55 pm

    Buggy… putting stop only on slideUp seems to fix that.

    # April 13, 2013 at 7:34 pm

    Works perfectly, thanks CrocoDilloMan!

    # April 13, 2013 at 7:55 pm

    Yw :P

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

You must be logged in to reply to this topic.

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