前端 鼠标滑过图片透明文字遮罩向上滑出效果 动画

鼠标滑过图片透明文字遮罩向上滑出效果 动画"/>

前端 鼠标滑过图片透明文字遮罩向上滑出效果 动画

<div style="display: inline-block;"><h3>鼠标滑过图片透明文字遮罩向上滑出效果</h3><divclass="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>