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

它应该有用。

Answer 2

基于给定的小提琴，我会使用透明的.png图像作为第二个重叠元素。不确定这是不是你的意图......

.container{
  position:relative;
}
.box {
    width: 400px; height: 200px;
    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;
}

.box:hover {
    background-position: 0 -100%;
}
.geysir{
  position:absolute;
  top:0px;
}

<div class="container">
  <div class="box"></div>
  <img class="portrait-image geysir" src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons-256/high-resolution-dark-blue-denim-jeans-icons-arrows/008776-high-resolution-dark-blue-denim-jeans-icon-arrows-hand-pointer1-right.png">
</div>

Answer 3

你想拥有背景，包括悬停时顶部的文字幻灯片吗？在这种情况下，你最好转换这样的底部动作：

.image-container {
    position: relative;
    overflow: hidden;
}
.image-container .after {
    position: absolute;
    bottom: 100%;
    margin: auto;
    width: 100%;
    height: 100%;
    color: #fff;
    background-color: black;
    -webkit-transition: bottom 1s;
   -moz-transition: bottom 1s;
    transition: bottom 1s;
}
.image-container:hover .after {
    bottom: 0;
}

Fiddle

如果您希望将文字显示在变为黑色的红色背景上，请尝试将上述内容与您使用的内容组合使用。避免使用display：none / block，因为这会阻止转换功能。

.image-container {
    position: relative;
    overflow: hidden;
}
.image-container .after {
    position: absolute;
    bottom: 100%;
    margin: auto;
    width: 100%;
    height: 100%;
    color: #fff;    
    background-size: 100% 200%;
    background-image: linear-gradient(to bottom, red 50%, black 50%);
    -webkit-transition: background-position 2s;
   -moz-transition: background-position 2s;
    transition: background-position: 2s;
}
.image-container:hover .after {
    bottom: 0;
    background-position: 0 -100%; 
}

Fiddle

向下滑动背景过渡

3 个答案: