背景が下にスライドします

Question

私はホバーで背景色を変更しようとしています。 。 私はいろいろなアプローチを試しましたが、うまく動作しません。私の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イメージをそのような第2の重複要素として使用します。それはあなたの意図だ場合は...わからない

.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