CSS Overlay effect
<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>