Question

希望有人可以指出我正确的方向，如果这是错误的发布地点而道歉，但我想我会拍摄一个问题。

我想我会尝试实现全宽字幕，1行中有3个字幕，并带有悬停效果。

实施例： http://expressivemedia.co.uk/portfolio/

只有示例和我要找的内容之间的差异是我希望悬停时完全不透明的覆盖，而不是从底部拉出。

有人能指出我正确的方向，我可能会看到一些示例代码可以玩吗？

Answer 1

您可以使用包装器div，其中包含两个绝对定位的元素。然后，您可以在悬停上为它们设置动画：

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
.wrap {
  width: 33%;
  display: inline-block;
  height: 200px;
  position: relative;
  overflow: hidden;
  margin:0;
}
.wrap img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.8s;
}
.wrap .desc {
  position: absolute;
  top: 100%;
  left: 0;
  height: 100%;
  width: 100%;
  transition: all 0.8s;
  background: tomato;
}
.wrap:hover img {
  top: -100%;
}
.wrap:hover .desc {
  top: 0;
}

＆＃13;

<div class="wrap">
  <img src="http://placekitten.com/g/300/200" />
  <div class="desc">This is a nice description</div>
</div>
<div class="wrap">
  <img src="http://placekitten.com/g/300/200" />
  <div class="desc">This is a nice description</div>
</div>
<div class="wrap">
  <img src="http://placekitten.com/g/300/200" />
  <div class="desc">This is a nice description</div>
</div>
<div class="wrap">
  <img src="http://placekitten.com/g/300/200" />
  <div class="desc">This is a nice description</div>
</div>

＆＃13;

Fiddle

Answer 2

对于您要做的事情，我只会使用Google开发人员工具，只需修改示例页面的CSS即可。通过这种方式，您可以在感受代码的同时使用设置。您正在寻找的事情可以通过CSS完成。唯一一次棘手的是如果使用JS添加内联样式。

Bootstrap友好的Jquery（全宽）字幕

2 个答案: