Transition effects Top vs. Bottom in CSS is not working

Question

Well, this is my first topic here, so here it is!

I've just done a nice-simple :hover code where you can mouse over an image and the captions underneath it appears for complete. More specifically, in this code I have two types of captions, one above the image and one right underneath the image, which can be found when you mouse it over.

The :hover works pretty fine, however I need to add a simple effect, just a little linear transition. So I add the most basic transitions in the "a" tag, but it is not working at all! I guess the code is not recognizing the top:0px in the .featured-banner a class and the bottom:0px in the .featured-banner a:hover.

Does anyone have a solution for it? I appreciate you guys for helping me out!

Oh, just in case, the text inside the captions classes are written in portuguese but not very interesting, just an ad for Cancun! =P

Here is the HTML i'm using:

<div class="featured-banner">
<a href="#">
    <div class="caption">
        <p>Mega Oferta • Cancún • Carnaval 2014</p>
    </div>
    <img src="http://www.advtour.com.br/sample-cancun.jpg" />
    <div class="under-caption">A partir de US$ 2.148 Ou entrada + 11x de R$ 358</div>
</a>

And here is the CSS:

.featured-banner {
    width:930px;
    height:350px;
    background:#000;
    font-family:sans-serif;
    font-size:23px;
    margin:14px 0px;
    overflow:hidden;
    position:relative;
}
.featured-banner a {
    text-decoration:none;
    position:absolute;
    top:0;
    -webkit-transition:all 1s ease;
       -moz-transition:all 1s ease;
        -ms-transition:all 1s ease;
         -o-transition:all 1s ease;
            transition:all 1s ease;
}
.featured-banner a:hover {
    top:inherit;
    bottom:0;
}

.caption {
    width:100%;
    height:350px;
    color:#FFF;
    text-transform:uppercase;
    position:absolute;
    top:0px;
    z-index:98;
}

.caption p {
    width:97%;
    background:rgba(0,0,0, .4);
    color:#FFF;
    text-align:justify;
    text-transform:uppercase;
    background:rgba(0,0,0, .4);
    padding:11px 14px;
    position:absolute;
    bottom:0px;
    z-index:98;
}

.under-caption {
    width:97%;
    background:rgba(0,0,0, .4);
    color:#FFF;
    font-size:20px;
    text-align:justify;
    background:rgba(0,0,0, .4);
    padding:11px 14px;
    z-index:98;
}

Here is a demo

Answer 1

If you are going to transition the effect then you need to transition the same style. Going from top - bottom will cause no transition since it is changing the styles. If you did top: 0; to top: 100%; then you will see a transition.

Here is the css I changed:

.featured-banner a {
    text-decoration:none;
    position:absolute;
    top:0;
    -webkit-transition:all 1s ease;
       -moz-transition:all 1s ease;
        -ms-transition:all 1s ease;
         -o-transition:all 1s ease;
            transition:all 1s ease;
}

.featured-banner a:hover {
    top:inherit;
    top: -55px;
}

Finally, a fiddle: Demo

Answer 2

You can only transition the same attribute. Top and bottom aren't the same. I worked out a fiddle, which shows how it could work.

.under-caption {
    position: absolute;
    width:97%;
    background:rgba(0,0,0, .4);
    color:#FFF;
    font-size:20px;
    text-align:justify;
    background:rgba(0,0,0, .4);
    padding:11px 14px;
    z-index:98;
    bottom: -3em;
    -webkit-transition:bottom 1s ease;
       -moz-transition:bottom 1s ease;
        -ms-transition:bottom 1s ease;
         -o-transition:bottom 1s ease;
            transition:bottom 1s ease;
}

.featured-banner:hover .under-caption{
    bottom: 1em;
}

http://jsfiddle.net/u3E5P/1/