Bootstrap 展开 Div答案

【问题标题】：Bootstrap Expand DivBootstrap 展开 Div
【发布时间】：2015-12-20 06:40:04
【问题描述】：

我正在尝试创建一个与该网站相同的网站。 www.treasurelimo.com 如果您在主页上向下滚动并查看“热门目的地”。当您将鼠标悬停在图像上时，蓝色区域会扩大并显示更多信息。

我正在使用 wordpress，但不想使用任何插件。现在我有这些图片是从其他帖子中填充的。这是我的工作方式。这是我的网站：www.sealfitdev.demosite.us/coaching-staff 我得到了将文字放在图片内的 CSS，当我将鼠标悬停在它上面时，我只需要它展开。任何人都可以帮助我或将我指向一个显示我如何做到这一点的帖子吗？我正在查看引导文档，但没有成功。谢谢

【问题讨论】：

您的网站抛出禁止错误。创建一个 plunkr 并向我们展示你做了什么
对不起：sealfitdev.demosite.us/coaching-staff
你需要展示你在这个网站上所做的事情。无论如何这里是教程：kirupa.com/html5/slide_image_hover_using_css3.htm
感谢您的帮助！但是在该教程中，它只有一个图像，您首先只显示顶部然后取消隐藏底部。在我的情况下，它的文本是从数据库字段中填充的

标签： html css wordpress twitter-bootstrap

【解决方案1】：

您可以使用 CSS 过渡来实现效果（请参阅一些基本的 examples here）。

为您的用例查看此示例at this JSFiddle（不是一个特别干净的示例，但它应该说明这个概念）。

为了清楚起见，我已从您的网站中提取标记并对其进行了一些简化。

<div class="employee-thumb pull-left">
    <div class="inner">
        <img width="150" height="150" src="http://i.forbesimg.com/media/lists/people/elon-musk_416x416.jpg" />
        <div class="info">
            <p>Elon Musk</p>
            <p>Additional information including buttons</p>
        </div>
    </div>
</div>

现在在 CSS 中，我们可以将 .info 设置为绝对定位在相对定位的父级 .inner 中。由于.inner 的溢出是隐藏的，因此可以通过调整绝对定位将内容推到我们的可见范围之外。

.inner { 
    position: relative; 
    overflow: hidden; 
    max-width: 150px; 
} 
.inner .info { 
    background-color: rgba(255,255,255,0.7); 
    position: absolute; 
    bottom: -4em; 
}

悬停在.inner、.info上时，底部绝对定位返回0，内容向上滑动。

.inner:hover .info { 
    bottom: 0em; 
}

我们使用 CSS 过渡为整个事物设置动画。

.inner .info { 
    transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; 
}

【讨论】：