title: Getting overlay to expand upwards
body: <p>In <a href="http://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp" rel="nofollow noreferrer">this</a> simple W3Schools example, the overlay starts from the top of the page and expands to the bottom.  How could I achieve the result of getting it to expand starting from the bottom of the page and then reaching the top?</p>
  
  <p>CSS</p>
  
  <pre><code>/* The Overlay (background) */
  .overlay {
      /* Height &amp; width depends on how you want to reveal the overlay (see JS below) */    
      height: 0;
      width: 100%;
      position: fixed; /* Stay in place */
      z-index: 1; /* Sit on top */
      left: 0;
      top: 0;
      background-color: rgb(0,0,0); /* Black fallback color */
      background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
      overflow-x: hidden; /* Disable horizontal scroll */
      transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }
  </code></pre>
  
  <p>JAVASCRIPT</p>
  
  <pre><code>/* Open */
  function openNav() {
      document.getElementById("myNav").style.height = "100%";
  }
  
  /* Close */
  function closeNav() {
      document.getElementById("myNav").style.height = "0%";
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;!-- The overlay --&gt;
  &lt;div id="myNav" class="overlay"&gt;
  
    &lt;!-- Button to close the overlay navigation --&gt;
    &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;
  
    &lt;!-- Overlay content --&gt;
    &lt;div class="overlay-content"&gt;
      &lt;a href="#"&gt;About&lt;/a&gt;
      &lt;a href="#"&gt;Services&lt;/a&gt;
      &lt;a href="#"&gt;Clients&lt;/a&gt;
      &lt;a href="#"&gt;Contact&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;!-- Use any element to open/show the overlay navigation menu --&gt;
  &lt;span onclick="openNav()"&gt;open&lt;/span&gt;
  &lt;/body&gt;
  </code></pre>