CSS3过渡高度自动为100%

我有一个显示图像标题的小缩略图。当你把鼠标悬停在它上面时，覆盖会覆盖整个图像，"了解更多"按钮也会显示出来。这是我到目前为止的一些内容:

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不会起作用，因为文本最初甚至不占用整个空间，所以它只会去文本的高度。当我将height属性设置为100%的时候，它就会在没有过渡的情况下再次出现。

任何帮助将不胜感激!我想让叠加慢慢地向上滑动，学习更多按钮逐渐淡出(但我可以稍后做，一旦我让幻灯片工作)。

我还没有解决所有的问题，但这是相当接近只用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>

Ok…这个解决方案可能适合你，但它可能不是很漂亮(我讨厌使用!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

没有办法用纯CSS处理height:auto的过渡。这里你可以阅读一些变通方法:http://n12v.com/css-transition-to-from-auto/

相关内容

最新更新

热门标签：