title: Transition effects Top vs. Bottom in CSS is not working
body: <p>Well, this is my first topic here, so here it is!</p>
  
  <p>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.</p>
  
  <p>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 <strong>top:0px</strong> in the <em>.featured-banner a</em> class and the <strong>bottom:0px</strong> in the <em>.featured-banner a:hover</em>.</p>
  
  <p>Does anyone have a solution for it? I appreciate you guys for helping me out!</p>
  
  <p>Oh, just in case, the text inside the captions classes are written in portuguese but not very interesting, just an ad for Cancun! =P</p>
  
  <p>Here is the HTML i'm using:</p>
  
  <pre><code>&lt;div class="featured-banner"&gt;
  &lt;a href="#"&gt;
      &lt;div class="caption"&gt;
          &lt;p&gt;Mega Oferta • Cancún • Carnaval 2014&lt;/p&gt;
      &lt;/div&gt;
      &lt;img src="http://www.advtour.com.br/sample-cancun.jpg" /&gt;
      &lt;div class="under-caption"&gt;A partir de US$ 2.148 Ou entrada + 11x de R$ 358&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is the CSS:</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/caioferrari09/u3E5P/" rel="nofollow">Here is a demo</a></p>