当前位置: 动力学知识库 > 问答 > 编程问答 >

html - CSS3 transition height auto to 100%

问题描述:

I have a little thumbnail that shows the title of an image. When you hover over it, the overlay spreads over the entire image and the button "learn more" will show as well. This is a fiddle of what I have so far:

http://jsfiddle.net/razLnbvL/

My 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>

And my 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;

}

However, I have tried min-height and max-height, but obviously the max-height won't work since the text doesn't even take up the entire space initially so it's only going to go to the height of the text. And when I set the height attribute to 100% it just jolts up without the transition again.

Any help would be appreciated! I want the overlay to slowly slide up and the learn more button to fade in (but I can do that later once I get the slide to work).

网友答案:

Ok mate... This solution may work for you BUT it may not be very pretty (I hate the use of !important) and need a little jquery.

Basically as I wrote in the comments there's a easy solution if the height could be a fixed value, but it is not.

However we can calculate the height with jquery and apply the value to each caption. We need though a diferent class for each container. in your case like:

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

I added cap1, cap2, cap3 classes.

The 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);
        }); 

And then as hover css:

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

You need the important to overwritte the value set with jquery as an inline style will always be applied over css sheet.

(the bottom value I changed at caption was to let it looks as in your first example)

Edit: if you resize the window to check a caption with 2 text lines you need to reload the page to make the script works again.

JSFIDDLE

网友答案:

There is no way to handle transitions from height:auto with pure CSS. Here you can read some workaround: http://n12v.com/css-transition-to-from-auto/

网友答案:

I haven't worked out all the kinks, but this is pretty close using only 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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: