title: Pure CSS3 show/hide full height div with transition
body: <p>Dear Stackoverflow readers,</p>
  
  <p>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. </p>
  
  <p>In this link: <a href="http://tympanus.net/Tutorials/FullscreenBookBlock/" rel="nofollow">http://tympanus.net/Tutorials/FullscreenBookBlock/</a>
  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.</p>
  
  <p>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.</p>
  
  <p>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>
  
  <p>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 :)</p>