transfrom 滑动 ,

  暂不完整,等待后续
itemArr:[
  {id: 1,name: "张三"},
  {id: 2,name: "李四"},
  {id: 3,name: "王五"}
]

<ul class="conMain-content">
  <li class="divLi" v-for="(item, index) in itemArr" :key="index">
     <div class="img-mask">
       {{ item.id }}
     </div>
     <div class="img-content">
       <p class="img-content-title">{{ item.title }}</p>
     </div>
  </li>
</ul>

.conMain-content{
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.divLi{
  width: 400px;
  height: 380px;
  margin-top: 34px;
  overflow: hidden;
}
ul li .img-mask{
  width: 100%;
  height: 100%;
  background-color: #666564;
}

.img-content{
  width:400px;
  height:315px;
  background:rgba(60,125,245,1);
  transform: translateY(0); // 移动的初始位置  translateX()左右移动 translateY()上下移动  scale  显示的透明度0-1
  transition: 1s; // 回到原来的位置的时间
}
li:hover .img-content{
  transform: translateY(-315px) scale(1); //移动的终末位置
  transition: 1s; //移动到某个位置的时间
}