css - 显示隐藏内容 - 流畅的外观

Question

我整理了一个 JSFiddle我很满意它有正确的代码。如您所见，当您将鼠标悬停在“a”元素上时，我在底部抬高了一个 div 以显示隐藏的“文本”

a {
  display: block;
  width: 200px;
}

a:hover .b {
  bottom: 0px;
}

.a {
  height: 250px;
  background-color: red;
  position: relative;
  overflow: hidden;
}

.b {
  position: absolute;
  bottom: -50px;
  background-color: yellow;
  width: 100%;
}

.c {
  height: 50px;
  background-color: green;
}

<a href="http://www.google.com">
  <div class="a">
    <div class="b">

      <div class="c">
        A title
      </div>
      <div class="c">
        Read more
      </div>

    </div>
  </div>
</a>

我遇到的问题是底部div显示太快，有没有css属性让div慢慢上升？

this 中使用了类似的方法我正在尝试复制的网站(页面下方)。

有什么想法可以实现吗？

Answer 1

在 css 中的 b 元素上添加 transition css 属性以指定关联样式所花费的时间:

.b {
  position: absolute;
  bottom: -50px;
  background-color: yellow;
  width: 100%;

  transition: bottom 1s;
  -webkit-transition: bottom 1s;
}