[游戏开发] 前端鼠标滑过图片透明文字遮罩向上滑出效果动画

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 游戏开发 -> 前端鼠标滑过图片透明文字遮罩向上滑出效果动画 -> 正文阅读

[游戏开发]前端鼠标滑过图片透明文字遮罩向上滑出效果动画

<div style="display: inline-block;">
  <h3>鼠标滑过图片透明文字遮罩向上滑出效果</h3>
  <div
    class="parent-hover-class"
    @mouseenter="clickShow(item, true)"
    @mouseleave="clickShow(item, false)"
    v-for="(item, index) in imageList"
    :key="index"
  >
    <img :src="item.url" style="max-width:396px;height: 297px;" />
    <div class="hover-class" v-show="item.isShow">
      {{ item.content }}
    </div>
  </div>
</div>

data() {
  return {
    imageList: [
      { url: image3, isShow: false, content: "殷白雪" },
      { url: image4, isShow: false, content: "紫萱" },
      { url: image12, isShow: false, content: "杨玉环" },
      { url: image13, isShow: false, content: "晴儿" },
      { url: image8, isShow: false, content: "王昭君" },
      { url: image9, isShow: false, content: "马尔泰·若曦" },
      { url: image7, isShow: false, content: "王语嫣" },
      { url: image11, isShow: false, content: "杨玉环" },
    ]
  }
},
methods: {
  clickShow(item, val) {
    item.isShow = val;
  }
}


<style scoped>
.parent-hover-class {
  max-width: 396px;
  height: 297px;
  cursor: pointer;
  display: inline-block;
  margin: 5px;
  float: left;
}
.hover-class {
  background: rgba(255, 90, 88, 0.7);
  max-width: 396px;
  height: 297px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  position: relative;
  top: -301px;
}
@keyframes slider {
  0% {
    height: 0px;
    position: relative;
    top: 0;
  }
  100% {
    height: 297px;
    position: relative;
    top: -301px;
  }
}
.hover-class {
  animation: slider 0.5s;
}
</style>