slide down background transition - html

Question

i am trying to get the background color to change on hover. Something like this.
I have tried various approaches but cannot get it to work, presumably it is the way my CSS and HTML is set up. I cannot figure out why it is not working, as it should be easy to implement
Please see code below.
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

Remove the background declaration on the hover. It's overriding all the other backgrounds you declared previously.
.image-container:hover .after {
display: block;
background-position: 0 -100%;
}
It should then work.

Answer 2

Based on the given fiddle, I would use a transparent .png image as a second overlapping element like that. Not sure if that's your intention...
.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

Do you want to have the background, including the text slide in from the top on hover? In which case you would be better transitioning a bottom move like this:
.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
If you're looking to have your text appear on a red background that shifts to black, try using a combination of the above with what you were using. Avoid using display: none/block as this stops the transistion from functioning.
.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