鼠標(biāo)移入，文字動(dòng)畫.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">
    我是親愛噠問嗎可是怕拉風(fēng)阿斯達(dá)發(fā)噶實(shí)打?qū)崋?，愛?  </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);
}