Question

我正在尝试创建一个与此网站完全相同的网站。 www.treasurelimo.com如果您在主页上向下滚动并查看“热门目的地”。当你翻看图像时，蓝色区域会扩展，看到更多信息。

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

Answer 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; 
}

Bootstrap展开Div

1 个答案: