Эффект CSS Overlay

Question

Я пытаюсь создать эффект наложения для раздела служб. Мне удалось заставить его покрыть идущие справа налево и нужно создать несколько разных, но не может заставить его идти сверху вниз или снизу вверх. Вот пример кода.

.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

Вы можете использовать position: absolute на накладке для достижения снизу вверх и наоборот эффект ваших после.

• JSFiddle из bottom to top
• JSFiddle из top to bottom

Вот рабочий код, который вы можете подправлять:

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