CSS Overlay effect

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%;
}