How to grow a conatainer div, when content is moving

[zantafio]

Hello,
i’d like to create a div container for a project, which contains an image and some captions. the captions are hidden behind the image and get “drawn” out the bottom on click / touch.
It works fine, however the container is not growing in size and the adjacent ones dont move their position, so the caption-drawer is not visible.
Here is a pen ( for better clarity i put the drawer on top of the image here )
http://codepen.io/zantafio/pen/bpYzLg

any ideas greatly appreciated.

[Anonymous]

Hello,
I really do not know, maybe something like

height: auto;

Maybe that will work…

Thanks.

[Paulie_D]

If you want adjacent elements to move you can’t use absolute positioning. I’d start there.

[zantafio]

Hm, but how can i stack the one div under the other one without using absolute positioning?

[bearhead]

Something like this maybe?

http://codepen.io/kvana/pen/oxEqQj

[zantafio]

Thanks a lot that does solve the growing.
However: The overlay cant have a fixed height since the text inside will be dynamic.
Maybe i do need to use Javascript?

[bearhead]

yeah, if you’re already using jquery, this can be made much easier just using the slideToggle method:

http://codepen.io/kvana/pen/oxEqQj

[zantafio]

thanks a lot bearhead!
however there is one extra thing i was aiming for:
hardware acceleration. this is why I wanted to use translate3d …
any idea on that?

[Beverleyh]

You might want to look in to VelocityJS https://www.google.co.uk/search?q=velocity+js+hardware+acceleration

[Author]

Posts