Question

我有一个小缩略图，显示图像的标题。当您将鼠标悬停在其上时，叠加层会在整个图像上展开，并且“了解更多”按钮也会显示。这是我到目前为止的一个小提琴：

我的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，但显然最大高度不起作用，因为文本最初甚至不占用整个空间，所以它只会去文字的高度。当我将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>

Answer 2

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

Answer 3

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

基本上我在评论中写道，如果height可以是固定值，那么这是一个简单的解决方案，但事实并非如此。

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

<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类。

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表。

（我在caption更改的最低值是让它看起来像你的第一个例子）

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

<强> JSFIDDLE

CSS3过渡高度自动达到100％

3 个答案: