<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 鼠标经过显示遮罩
最新推荐文章于 2024-05-31 11:36:21 发布
这篇博客展示了如何使用CSS创建一个从底部上升的遮罩效果,应用于一组图片。当鼠标悬停在图片上时,遮罩会显示相关描述内容,并平滑过渡。通过调整样式,可以实现图片的底部遮罩层从1像素高度逐渐扩展到覆盖整个图片,同时显示描述文字,提供了一种优雅的交互体验。
摘要由CSDN通过智能技术生成