html - CSS3 过渡高度自动到 100%

Question

我有一个显示图像标题的小缩略图。当您将鼠标悬停在它上面时，叠加层会覆盖整个图像，“了解更多”按钮也会显示出来。这是我目前所拥有的 fiddle :

http://jsfiddle.net/razLnbvL/

我的 HTML:

<section id="industries">
    <article>
        <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
        <div class="caption">
            <span>Golf Courses</span>
            <a href="#" title="Learn more" class="button">Learn more</a>
        </div>
    </article>
    <article>
        <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
        <div class="caption active">
            <span>Land Owners</span>
            <a href="#" title="Learn more" class="button">Learn more</a>
        </div>
    </article>
    <article>
        <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
        <div class="caption">
            <span>Landscape Contractors</span>
            <a href="#" title="Learn more" class="button">Learn more</a>
        </div>
    </article>
</section>

还有我的 CSS:

#industries article {
    float: left;
    width: 33.33333%;
    position: relative;
}

#industries article img {
    max-width: 100%;
}

#industries article .caption {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    background-color: rgba(24, 66, 113, 0.65);
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 9px 14px;
    bottom: 0;
    height: auto;
    transition: height 0.25s ease-out;
}

#industries article .caption span {
    display: block;
}

#industries article .caption .button {
    background-color: #b50937;
    border-color: #b50937;
    display: none;
    color: #fff;
    padding: 10px 30px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
}

#industries article:hover .caption {
    height: 100%;
    padding-top: 40px;
    transition: height 0.25s ease-in;
}

#industries article:hover .caption span {
    margin-bottom: 25px;
}

#industries article:hover .caption .button {
    display: inline-block;
    text-decoration: none;
}

但是，我已经尝试了min-height 和max-height，但很明显，max-height 是行不通的，因为文本甚至没有占据整个空间最初，所以它只会达到文本的高度。当我将高度属性设置为 100% 时，它会在没有再次过渡的情况下颠簸起来。

任何帮助将不胜感激!我希望叠加层缓慢向上滑动，让“了解更多”按钮淡入(但我可以稍后在让幻灯片开始工作后执行此操作)。

Answer 1

我还没有解决所有问题，但仅使用 CSS 就非常接近了。

#industries article {
    float: left;
    width: 33.33333%;
    position: relative;
    overflow:hidden;
}

#industries article img {
    max-width: 100%;
}

#industries article:hover .caption {
    height:100%;
    max-height: 100%;
    padding-top: 40px;
}

#industries article .caption {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    background-color: rgba(24, 66, 113, 0.65);
    color: #fff;
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    padding: 9px 14px;
    bottom: 0;
    height: auto;
    max-height: 36px;
    transition: padding-top 0.5s, max-height 0.75s;
}

#industries article .caption span {
    display: block;
    margin-bottom: 25px;
}

#industries article .caption .button {
    background-color: #b50937;
    border-color: #b50937;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 10px 30px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    visibility:hidden;
    opacity: 0;
    transition:visibility 0.2s linear,opacity 0.2s linear;
}

#industries article:hover .caption span {
}

#industries article:hover .caption .button {
    visibility:visible;
    opacity: 1;
}

<section id="industries">
    <article>
        <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
        <div class="caption">
            <span>Golf Courses</span>
            <a href="#" title="Learn more" class="button">Learn more</a>
        </div>
    </article>
    <article>
        <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
        <div class="caption active">
            <span>Land Owners</span>
            <a href="#" title="Learn more" class="button">Learn more</a>
        </div>
    </article>
    <article>
        <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
        <div class="caption">
            <span>Landscape Contractors</span>
            <a href="#" title="Learn more" class="button">Learn more</a>
        </div>
    </article>
</section>