css3 实现鼠标移入文字下滑动画效果

效果图展示：

鼠标移入，文字动画.gif

css

.wrap{
  width: 250px;
  height: 250px;
  overflow:hidden;
  position: relative;
}
.txt{
  position: absolute;
  width: 250px;
  height: 250px;
  top:-250px;
  background:rgba(0,0,0,0.5);
}
.img img{
  width: 100%;
}
.wrap,.txt{
  transition: all .5s;
  cursor: pointer;
}
.wrap:hover .txt{
  top:0;
}

html

<div class="wrap">
  <div class="txt">
    我是亲爱哒问吗可是怕拉风阿斯达发噶实打实吗，爱上
  </div>
  <div class="img">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3502659583,3709665526&fm=26&gp=0.jpg" alt="" >
  </div>
</div>

如果是从下往上

.txt{
  position: absolute;
  width: 250px;
  height: 250px;
  bottom:-250px;
  background:rgba(0,0,0,0.5);
}