怎么在轮播图内实现这个效果

怎么样在轮播图内，鼠标移到图片上文字从下方弹出来。 并且不遮挡图片。

纯CSS就能搞定了，

<style>
.swiper-item-box{
   position:relative;
  overflow:hidden;
}
.swiper-item-text{
  background:rgba(0,0,0,0.3);
  position:absolute;
  bottom:0;
  transform:translateY(-100%);
  transition: all .2s;
}
.swiper-item-box:hover .swiper-item-text{
  transform:translateY(0);
}
</style>
  <div class="swiper-item-box">
    <img src="" />
    <div class="swiper-item-text">文字</div>
</div>