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

最新推荐文章于 2023-11-29 11:41:27 发布

转载最新推荐文章于 2023-11-29 11:41:27 发布 · 290 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#css3 #css #前端

网站模版专栏收录该内容

3170 篇文章

订阅专栏

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

下载地址

实现遮罩的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;}