vue 鼠标经过显示遮罩

<template>
<div>
<h2>一、从底部上升遮罩效果</h2>
<div class="section-one">
<div class="list-one-box">
<img src="../assets/image/1.jpg" alt="" />
<div class="div-mask-one">
<div class="mask-one-p">
<p >图片一内相关描述内容</p>
</div>
</div>
</div>
<div class="list-one-box">
<img src="../assets/image/2.jpg" alt="" />
<div class="div-mask-one">
<div class="mask-one-p">
<p>图片二内相关描述内容</p>
</div>
</div>
</div>
<div class="list-one-box">
<img src="../assets/image/3.jpg" alt="" />
<div class="div-mask-one">
<div class="mask-one-p">
<p >图片三内相关描述内容</p>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
components: {},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
h2 {
text-align: center;
}
.section-one {
position: relative;
width: 1000px;
margin: 0 auto;
text-align: center;
/*中心内容居中*/
/* border: 1px solid red; */
}
.list-one-box {
position: relative;
display: inline-block;
width: 300px;
height: 200px;
cursor: pointer;
overflow: hidden;
margin: 10px 10px;
}
.list-one-box img {
width: 100%;
height: 100%;
}
.div-mask-one {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
cursor: pointer;
height: 1px;
background-color: rgba(0, 0, 0, 0.7);
/* 垂直居中展示 注意点 如果使用绝对居中，其内容内容要用一个div包起来 */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 16px;
color: #ffffff;
transition: height 300ms;
}
.list-one-box:hover .div-mask-one {
height: 100%;
transition: height 500ms;
}
.mask-one-p {
display: none;
}
.list-one-box:hover .mask-one-p {
display: block;
}
</style>
</style>

最后

以上就是幸福柠檬为你收集整理的vue 鼠标经过显示遮罩的全部内容，希望文章能够帮你解决vue 鼠标经过显示遮罩所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。