CSS transition doesn't work with top: auto
<p>I'm trying to modify a tutorial I found online that did 'almost' what I needed it to, but got stuck when it came to the CSS 'transitions' effects. </p>

<p>Essentially I need the text to be a certain space from the top, because the title will always be the same height (so only the title shows). And on hover I need the text block to be stuck to the bottom edge because the hover text could be long or short. </p>

<p>I have it working the way I want it to, but when I use top: auto the transition effect no longer works. If I give top a value of 0, then the text is stuck to the top and not the bottom like I want. </p>

<p><a href="https://jsfiddle.net/bsummers/sxh0n7d1/" rel="nofollow">https://jsfiddle.net/bsummers/sxh0n7d1/</a></p>

<p>Will the transitions simply just not work with 'auto'?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body{
  font-family: arial;  
}
}.showcase {
 list-style: none;
}
.showcase li {
    background: red none repeat scroll 0 0;
    display: inline-block;
    margin: 0;
    max-height: 200px;
    overflow: hidden;
    width: 300px;
}
.showcase li:last-child{
    margin: 0;
}
.showcase a {
    display: block;
    min-height: 200px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    width: 100%;
}
.showcase a img {
    height: auto;
    margin: 0 auto;
    max-width: 100%;
    position: absolute;
    top: 0;

 -webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 transition: all 0.2s ease-out;
}
.showcase a:hover img {
 top: -20px;
}
.showcase .text-holder {
    top: 156px;
    bottom: 0;

    position: absolute;
    z-index: 99;
    width: 100%;

 -webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 transition: all 0.2s ease-out;
}
.showcase a:hover .text-holder {
    bottom: 0;
    top: auto; //changing this to 0 doesn't stick the text to the bottom, but transition works.

 -webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 transition: all 0.2s ease-out;
}
.showcase a span {
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 11px;
    line-height: 20px;
    margin-top: 15px;
    width: 100%;

 -webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 transition: all 0.2s ease-out;
}
.showcase a h3 {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    box-sizing: border-box;
    color: #fff !important;
    cursor: pointer;
    font-size: 13px;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 0 !important;

 -webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 transition: all 0.2s ease-out;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="showcase"&gt;
  &lt;li class="thumb1"&gt; 
    &lt;a href="http://blog.web3canvas.com/"&gt;
      &lt;img src="http://demo.web3canvas.com/html5-css3/image-gallery-showcase-pure-css3/images/thumb1.jpg" width="500" height="374" alt="web3canvas"&gt;
      &lt;div class="text-holder"&gt;
        &lt;h3&gt;My Profile&lt;span&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem leo. Pellentesque et libero id lectus pretium lacinia...&lt;/span&gt;&lt;/h3&gt;
      &lt;/div&gt; 
    &lt;/a&gt; 
  &lt;/li&gt;
  
    &lt;li class="thumb2"&gt; 
    &lt;a href="http://blog.web3canvas.com/"&gt;
      &lt;img src="http://demo.web3canvas.com/html5-css3/image-gallery-showcase-pure-css3/images/thumb2.jpg" width="500" height="374" alt="web3canvas"&gt;
      &lt;div class="text-holder"&gt;
        &lt;h3&gt;My Profile&lt;span&gt;Different length of text...&lt;/span&gt;&lt;/h3&gt;
      &lt;/div&gt; 
    &lt;/a&gt; 
  &lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>