title: CSS transition (height property) - can't get it to roll from bottom
body: <p>I use height property to animate my DIV, it appears on hover of another element - it "rolls" from top. Is there a way to rotate the animation, so I would get it to appear from bottom to top?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="#" class="show"&gt;SHOW IT&lt;/a&gt;
  
  &lt;div id="appear"&gt;
      &lt;img src="http://data.atria.sk/matmenu/celevyk.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#appear {
      width: 308px;
      height: 0px;
      overflow:hidden;
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      transition: all 0.2s linear;
  }
  .show:hover + #appear, #appear:hover {
      height: 331px;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/8paj437a/" rel="noreferrer"><strong>JSFiddle</strong></a></p>