CSS显示隐藏元素案例——土豆网视频显示隐藏遮蔽罩

辣味蓓蓓酱

于 2020-12-13 11:07:08 发布

阅读量801

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_43623147/article/details/111089294

版权

本文介绍了一种使用CSS实现的图片遮罩效果。当鼠标悬停在图片上方时，会出现一个带有透明度的遮罩层，并展示播放图标。通过简单的HTML结构和CSS样式，可以轻松实现这一交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="tudou">
    <div class="mask">
    <img src="images/tudou.jpg" alt="">
</div>

.tudou { 
    position: relative;
    width: 44px;
    height: 320px;
    margin: 30px auto;
    background-color: pink;
}
.tudou img {
    width: 100%;
    height: 100%;
}
.mask {
    /* 隐藏遮蔽罩 */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3) url(images/arr.png) no-repeat center;
}
/* 当鼠标经过了土豆这个盒子，就让里面的遮蔽罩显示出来 */
.tudou:hover .mask {
    display: block;
}