CSS Overlay effect - html

Question

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.
.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%;
}
<div class="window-display">
<div class="overlay">
<div class="heading">
<h2 style="color: #fff;">SECTION TITLE</h2>
</div>
</div>
</div>

Answer 1

You can use position: absolute on the overlay to achieve the bottom to top and vice versa effect your after.
JSFiddle from bottom to top
JSFiddle from top to bottom
Here's the working code that you can tinker with:
<div class="window-display">
<div class="overlay">
<div class="heading">
<h2>SECTION TITLE</h2>
</div>
</div>
</div>
.window-display {
height: 500px;
background-image: url('http://loremflickr.com/320/240');
background-size: cover;
background-position: center center;
position: relative;
}
.window-display .heading {
padding-left: 15px;
}
.window-display .heading h2 {
color: #fff;
}
.window-display .overlay {
background-color:rgba(38,37,98,0.8);
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height:50px;
-webkit-transition-duration: 2s; /* Safari */
transition-duration: 2s;
}
.window-display:hover .overlay {
height: 100%;
}