CSS 中的顶部与底部过渡效果不起作用

Transition effects Top vs. Bottom in CSS is not working

提问by Caio Ferrari

Well, this is my first topic here, so here it is!

好吧，这是我在这里的第一个主题，所以就在这里！

I've just done a nice-simple :hover code where you can mouse over an image and the captions underneath it appears for complete. More specifically, in this code I have two types of captions, one above the image and one right underneath the image, which can be found when you mouse it over.

我刚刚完成了一个非常简单的 :hover 代码，您可以在其中将鼠标悬停在图像上，其下方的标题显示完整。更具体地说，在这段代码中，我有两种类型的标题，一种在图像上方，一种在图像正下方，当您将鼠标悬停在其上方时可以找到它们。

The :hover works pretty fine, however I need to add a simple effect, just a little linear transition. So I add the most basic transitions in the "a" tag, but it is not working at all! I guess the code is not recognizing the top:0pxin the .featured-banner aclass and the bottom:0pxin the .featured-banner a:hover.

:hover 效果很好，但是我需要添加一个简单的效果，只是一点点线性过渡。所以我在“a”标签中添加了最基本的过渡，但它根本不起作用！我猜的代码是不承认的顶部：0像素的.featured横幅一类和底部：0像素的.featured横幅：悬停。

Does anyone have a solution for it? I appreciate you guys for helping me out!

有没有人有解决方案？我感谢你们帮助我！

Oh, just in case, the text inside the captions classes are written in portuguese but not very interesting, just an ad for Cancun! =P

哦，以防万一，字幕类中的文字是用葡萄牙语写的，但不是很有趣，只是坎昆的广告！=P

Here is the HTML i'm using:

这是我正在使用的 HTML：

<div class="featured-banner">
<a href="#">
    <div class="caption">
        <p>Mega Oferta ? Cancún ? Carnaval 2014</p>
    </div>
    <img src="http://www.advtour.com.br/sample-cancun.jpg" />
    <div class="under-caption">A partir de US$ 2.148 Ou entrada + 11x de R$ 358</div>
</a>

And here is the CSS:

这是CSS：

.featured-banner {
    width:930px;
    height:350px;
    background:#000;
    font-family:sans-serif;
    font-size:23px;
    margin:14px 0px;
    overflow:hidden;
    position:relative;
}
.featured-banner a {
    text-decoration:none;
    position:absolute;
    top:0;
    -webkit-transition:all 1s ease;
       -moz-transition:all 1s ease;
        -ms-transition:all 1s ease;
         -o-transition:all 1s ease;
            transition:all 1s ease;
}
.featured-banner a:hover {
    top:inherit;
    bottom:0;
}

.caption {
    width:100%;
    height:350px;
    color:#FFF;
    text-transform:uppercase;
    position:absolute;
    top:0px;
    z-index:98;
}

.caption p {
    width:97%;
    background:rgba(0,0,0, .4);
    color:#FFF;
    text-align:justify;
    text-transform:uppercase;
    background:rgba(0,0,0, .4);
    padding:11px 14px;
    position:absolute;
    bottom:0px;
    z-index:98;
}

.under-caption {
    width:97%;
    background:rgba(0,0,0, .4);
    color:#FFF;
    font-size:20px;
    text-align:justify;
    background:rgba(0,0,0, .4);
    padding:11px 14px;
    z-index:98;
}

Here is a demo

这是一个演示

回答by Josh Powell

If you are going to transition the effect then you need to transition the same style. Going from top - bottom will cause no transition since it is changing the styles. If you did top: 0;to top: 100%;then you will see a transition.

如果要转换效果，则需要转换相同的样式。从上到下不会导致过渡，因为它正在改变样式。如果你这样做了top: 0;，top: 100%;那么你会看到一个转变。

Here is the css I changed:

这是我更改的css：

.featured-banner a {
    text-decoration:none;
    position:absolute;
    top:0;
    -webkit-transition:all 1s ease;
       -moz-transition:all 1s ease;
        -ms-transition:all 1s ease;
         -o-transition:all 1s ease;
            transition:all 1s ease;
}

.featured-banner a:hover {
    top:inherit;
    top: -55px;
}

Finally, a fiddle: Demo

最后，一个小提琴：演示

回答by Haroldchen

You can only transition the same attribute. Top and bottom aren't the same. I worked out a fiddle, which shows how it could work.

您只能转换相同的属性。顶部和底部不一样。我想出了一个小提琴，它展示了它是如何工作的。

.under-caption {
    position: absolute;
    width:97%;
    background:rgba(0,0,0, .4);
    color:#FFF;
    font-size:20px;
    text-align:justify;
    background:rgba(0,0,0, .4);
    padding:11px 14px;
    z-index:98;
    bottom: -3em;
    -webkit-transition:bottom 1s ease;
       -moz-transition:bottom 1s ease;
        -ms-transition:bottom 1s ease;
         -o-transition:bottom 1s ease;
            transition:bottom 1s ease;
}

.featured-banner:hover .under-caption{
    bottom: 1em;
}

http://jsfiddle.net/u3E5P/1/

http://jsfiddle.net/u3E5P/1/