显示隐藏的内容 - 光滑的外观

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