CSS3 过渡高度自动到 100%

Question

我有一个显示图像标题的小缩略图。当您将鼠标悬停在它上面时，叠加层会覆盖整个图像，按钮 "learn more" 也会显示。这是我目前所拥有的fiddle：

我的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 不会起作用，因为文本甚至没有占据整个 space最初所以它只会达到文本的高度。当我将高度属性设置为 100% 时，它会在没有再次过渡的情况下摇晃起来。

如有任何帮助，我们将不胜感激！我想让叠加层慢慢向上滑动，让“了解更多”按钮淡入（但我可以在幻灯片开始工作后稍后再做）。

Answer 1

无法处理从 height:auto 到纯 CSS 的转换。在这里您可以阅读一些解决方法：http://n12v.com/css-transition-to-from-auto/

Answer 2

好的，伙计...这个解决方案可能适合你，但它可能不是很漂亮（我讨厌使用 !important）并且需要一点 jquery。

基本上正如我在评论中所写的那样，如果 height 可以是一个固定值，那么有一个简单的解决方案，但它不是。

但是我们可以使用 jquery 计算高度并将该值应用于每个标题。我们需要为每个容器使用不同的 class。在你的情况下：

<article>
        <img src="http://i.imgur.com/jgEoqTy.jpg" alt="" />
        <div class="caption cap1">
            <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 cap2">
            <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 cap3">
            <span>Landscape Contractors</span>
            <a href="#" title="Learn more" class="button">Learn more</a>
        </div>
    </article>

我添加了 cap1、cap2、cap3 classes.

jquery:

$(document).ready(function () {
            var height1 = Math.max($(".cap1").outerHeight());
            $("#industries article .cap1").height(height1);
    var height2 = Math.max($(".cap2").outerHeight());
            $("#industries article .cap2").height(height2);
    var height3 = Math.max($(".cap3").outerHeight());
            $("#industries article .cap3").height(height3);
        });

然后悬停 css:

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

您需要重要的是覆盖 jquery 设置的值，因为内联样式将始终应用于 css sheet.

（我在 caption 更改的底部值是让它看起来像您的第一个示例）

编辑： 如果您调整 window 的大小以检查带有 2 个文本行的标题，您需要重新加载页面以使脚本再次运行。

JSFIDDLE

Answer 3

我还没有解决所有问题，但仅使用 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>

CSS3 过渡高度自动到 100%

CSS3 transition height auto to 100%

html

css

css-transitions