Question

我正在尝试为服务部分创建叠加效果。我设法让它从右到左覆盖，需要创建一些不同的，但不能让它从上到下或从下到上。以下是代码示例。

＆＃13;

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

＆＃13;

<div class="window-display">
                <div class="overlay">
                <div class="heading">
                  <h2 style="color: #fff;">SECTION TITLE</h2>
                  </div>
                </div>
                </div>

＆＃13;

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

CSS叠加效果

1 个答案: