自助购买VIP收藏本站将本站放到桌面
开启辅助访问 购买锦尚中国空间免费安装程序 请联系QQ278869155
源码论坛公告：本站是一个交流学习建站资源的社区论坛，旨在交流学习源码脚本等资源技术，欢迎大家投稿发言！ 【点击此处将锦尚放在桌面】

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛

 找回密码
 会员注册

QQ登录

只需一步，快速开始

源码论坛,商业源码下载,尽在锦尚中国商业源码论坛»论坛 › 网站源码(交流学习,共同进步) › 站长教程 › css 实现鼠标移入图片显示遮罩层
返回列表 发新帖
查看: 6313|回复: 0
打印 上一主题 下一主题

[CSS/Html] css 实现鼠标移入图片显示遮罩层

[复制链接]
洪七公

3123

主题

3525

帖子

14万

金币

超级版主

Rank: 8Rank: 8

积分
287186
跳转到指定楼层
1#
发表于 2022-12-7 14:58:53 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式


这个是我自己使用的，完全可以使用的，请仔细看一下：

  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.                 <style>
  7.                         .image-div {
  8.                             width: 300px;
  9.                                 height: 300px;
  10.                                 position: relative;
  11.                         }
  12.                         .image-div img {
  13.                                 width: 300px;
  14.                                 height: 300px;
  15.                                                 }
  16.                         .image-mask {
  17.                             position: absolute;
  18.                             width: 100%;
  19.                                 height: 100%;
  20.                                 bottom: 0;                       
  21.                             background: rgba(101, 101, 101, 0.6);
  22.                             color: #ffffff;
  23.                             opacity: 0;
  24.                             line-height: 300px;
  25.                         }
  26.                         .image-div:hover .image-mask {
  27.                             opacity: 1;   
  28.                             cursor: default;      
  29.                         }
  30.                 </style>
  31.         </head>
  32.         <body>
  33.                 <div class="image-div">
  34.                     <img src="img/38.jpg">
  35.                 <div class="image-mask"></div>
  36.                 </div>
  37.         </body>
  38. </html>
复制代码
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

聚合标签|锦尚中国,为中国网站设计添动力 ( 鲁ICP备09033200号 ) |网站地图

GMT+8, 2024-11-14 14:49 , Processed in 0.148546 second(s), 24 queries .

带宽由 锦尚数据 提供 专业的数据中心

© 锦尚中国源码论坛 52jscn Inc. 非法入侵必将受到法律制裁 法律顾问：IT法律网 & 褚福省律师 锦尚爱心 版权申诉 版权与免责声明