html - 下滑背景过渡

Question

我正在尝试让背景颜色在悬停时发生变化。 Something like this . 我尝试了各种方法，但无法让它工作，大概是我的 CSS 和 HTML 的设置方式。我不明白为什么它不起作用，因为它应该很容易实现

请看下面的代码。

CSS

.image-container {
    position: relative;
}
.image-container .after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    display: none;
    color: #FFF;
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    -webkit-transition: background-position 1s;
   -moz-transition: background-position 1s;
    transition: background-position 1s;
}
.image-container .after p {
    position: relative;
    text-align: center;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: 300;
    line-height: 300px;
    height: 300px;
}
.image-container:hover .after {
    display: block;
    background: rgba(0,0,0,0.3);
    background-position: 0 -100%; 
}

[class*='col-'] {
    float: left;
}
.col-1-3 {
  width: 33.33%;
}

HTML

<div class="col-1-3 image-container">
    <img class="portrait-image geysir" src="images/geysir.jpg">
    <div class="after">GEYSIR</div>
</div>

Answer 1

删除悬停时的 background 声明。它覆盖了您之前声明的所有其他背景。

.image-container:hover .after {
    display: block;
    background-position: 0 -100%; 
}

然后它应该可以工作了。