title: Transition on overlay
body: <p>I have a left menu that slides in when the user clicks on the hamburger. Behind it is an overlay with the following SCSS:</p>
  
  <pre><code>.overlay {
      background-color: $glb-nav-80-opacity-white;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 200;
      cursor: pointer;
  }
  
  .left-menu {
      background: $glb-nav-dark-blue;
      position: fixed;
      overflow-x: hidden;
      overflow-y: auto;
      margin: 0;
      padding: 0;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      transition: all 0.3s ease;
  
      a:hover {
          color: $glb-nav-white;
      }
  }
  </code></pre>
  
  <p>When people click on the hamburger menu, the overlay shows up abruptly. I need it to fade in. How can I do that using CSS?</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="overlay"&gt;&lt;/div&gt;
  &lt;div class="left-menu"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>When the user opens the page the <code>left-menu</code> has a left position of <code>-284px</code>. Then when people click on the hamburger icon, I add a class to the div that sets its left position to 0. </p>