Pure CSS3 show/hide full height div with transition
- by user1898838
Dear Stackoverflow readers,
I've been breaking my head over something I've seen at Tympanus, and I can't figure out how to properly do such a thing.
In this link: http://tympanus.net/Tutorials/FullscreenBookBlock/
you can see that the menu is completely hidden, and only visible when you click on an icon. It has a lovely transition, and it basically roughly sums up what I'm trying to accomplish.
The only difference with the above example is that I don't want to completely hide this full-height element, and I'd like to accomplish the above effect with a hover instead of having to click a button. So in an ideal world you'd see a vertical bar, and when you hover over that bar (or click on it with your finger if you're on a tablet), it "opens up" and shows you the full content inside the opened div.
Now, I can make a decent bit in html5 and css3, but the above explained effect that I'm trying to accomplish has given me serious headaches, hehe. Does anyone happen to know a tutorial I might have missed that does this exact thing?
p.s.: I have tried to take apart Tympanus' html/css, but with the page-fold effect that's also implemented in it I can't seem to figure it out, hence my hope for someone here to help me on my way :)