css实现文字从图片上面的下方淡入淡出

** html代码**

    <div class="mask" data-title="标题">
      <el-image style="width: 100%;height: 100%;"
                :src="require('@/assets/smile.svg')"
                :preview-src-list="[require('@/assets/smile.svg')]"
                @error="图片加载失败" alt="图片加载失败">
      </el-image>
    </div>

** css代码 **

.each-img{
  width: 50%;
  height: 50%;
}

.mask{
  position: relative;
  width:100%;
  height:100%;
  overflow: hidden;
}
.mask:after{
  content: attr(data-title);
  position: absolute;
  width:100%;
  top:100%;
  left:0;
  padding: 0.5em 0;
  text-align: center;
  color: #fff;
  background-color: rgba(52,47,41,.5);
  -webkit-transition:all .3s ease-in-out;
  transition:all .3s ease-in-out;
  opacity: 0;
}
.mask:hover:after{
  opacity: 1;
  -webkit-transform:translate(0,-100%);
  transform:translate(0,-100%);
}