Question

我有以下内容：

<div class="one-third">
    <div class="inside">
        <h4><strong>How much can you save?</strong></h4>
        <p>testing</p>
        <p>testing</p>
        <p>testing</p>
        <p>testing</p>
    </div>
    <div class="caption">caption here</div>
</div>

我希望能够在悬停期间从底部悬挂在底部的标题（div标题）中滑动，并在不悬停时滑出底部。我从这里和那里看了几个来源，但似乎无法做到正确。同样重要的是，在这种情况下，主容器（三分之一）不会调整大小;标题应该在其中。我怎么能做到这一点？

Answer 1

DEMO - 这样的话？

使用CSS3 transition-duration（W3Schools）来创建动画。

更新

DEMO - 您正在寻找烤面包机效果吗？

更新2：

DEMO - 使用jQuery .animate()进行动画处理。

Answer 2

这是我最终的结果。它涵盖了我需要的一切......翻转时底部的吐司显示，翻转时整个div是一个链接，你也可以在其中包含链接。 '动画'仅适用于FF，但我故意这样做，因为我的div使用圆角......无论出于何种原因吐司都没有跟随溢出：隐藏所以它的角不是圆角。

        <div class="one-third">
            <div class="inside">
                <a href="#"></a>
                <h4><strong>How much can you save?</strong></h4>
                <p>testing</p>
                <p>testing</p>
                <p><a class="link" href="#">testing</a></p>
                <p>testing</p>
                <span class="toast">Learn more about one</span>
            </div>
        </div>

的CSS：

.one-third{
border:1px solid #d8d8d8;
margin:0 9px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background:#ffffff;
text-align:center;
position:relative;
overflow:hidden;
cursor: pointer;

}

.one-third:hover{ 
background: #eeeeee;
}

.one-third .inside{
padding:10px;
}

.one-third a{ /*entire div link*/
position:absolute; 
width:100%;
height:100%;
top:0;
left: 0;
/* edit: added z-index */
z-index: 1;
}

.one-third a.link { /*links on top of box*/
position:relative;
z-index:2;
}

.one-third .inside .toast {
background: rgb(71, 71, 71); /* Fall-back for browsers that don't support rgba */
background: rgba(0, 0, 0, .7);
display: block;
position: absolute;
left: 0;
width: 100%;
bottom: -30px;
line-height:30px;
color: #fff;
font-size:14px;
text-align: center;
transition: all 0.1s linear 0s; /*no moz, webkit, or o because radius is needed and won't scroll right*/    
-moz-border-radius: 0 0 6px 6px;
-webkit-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}

.one-third:hover .toast {
bottom: 0;
}

div的标题 - 从底部滑入 - 滑出到底部

2 个答案: