title: CSS Overlay effect
body: <p>I'm trying to create overlay effect for a services section. I've managed to get it to cover going from right to left and need to create a few different ones, but can't get it to go from top to bottom or from bottom to the top. Here is an example of the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.window-display {
    min-height: 500px;
    background-image: url('http://loremflickr.com/320/240');
    background-size: cover;
    background-position: center center;
  }
  
  .window-display .heading { 
    padding-left: 15px; 
  }
  
  .window-display .overlay {
    background-color:rgba(38,37,98,0.8);
    min-height: 500px;
    width: 40%;
    float: right;
    overflow: hidden;
    -webkit-transition-duration: 2s; /* Safari */
    transition-duration: 2s;
  }
  
  .window-display:hover .overlay {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="window-display"&gt;
                  &lt;div class="overlay"&gt;
                  &lt;div class="heading"&gt;
                    &lt;h2 style="color: #fff;"&gt;SECTION TITLE&lt;/h2&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>