h5+css3鼠标悬浮图片出现标题遮罩效果

amohan

于 2021-12-22 09:45:40 发布

阅读量277

点赞数

CC 4.0 BY-SA版权

分类专栏：网站模版文章标签： css3 css 前端

原文链接：https://yy123.ink/frontDetail/11914

网站模版专栏收录该内容

3170 篇文章

订阅专栏

本文介绍了一种使用CSS实现元素遮罩效果的方法。通过设置绝对定位及透明度，并结合过渡效果，可以创建平滑出现的遮罩层。适用于网页交互设计。

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

下载地址

实现遮罩的css代码.homepanylist li a i { display: block; position: absolute; left: 0; bottom: -24px; width: 204px; height: 24px; background: #474747; z-index: 5; opacity: 0.5; filter: alpha(opacity=50); transition: bottom 0.2s; -webkit-transition: bottom 0.2s; -moz-transition: bottom 0.2s; -o-transition: bottom 0.2s;}.homepanylist li a em { display: block; position: absolute; left: 0; bottom: -24px; width: 204px; height: 24px; font-style: normal; line-height: 26px; color: #fff; text-align: center; z-index: 6; transition: bottom 0.2s; -webkit-transition: bottom 0.2s; -moz-transition: bottom 0.2s; -o-transition: bottom 0.2s;}.homepanylist li a:hover i,.homepanylist li a:hover em { display: block; bottom: 0; transition: bottom 0.2s; -webkit-transition: bottom 0.2s; -moz-transition: bottom 0.2s; -o-transition: bottom 0.2s;}

dd: