源码论坛公告:本站是一个交流学习建站资源的社区论坛,旨在交流学习源码脚本等资源技术,欢迎大家投稿发言! 【点击此处将锦尚放在桌面

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

 找回密码
 会员注册

QQ登录

只需一步,快速开始

查看: 6390|回复: 0

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

[复制链接]

3123

主题

3525

帖子

14万

金币

超级版主

Rank: 8Rank: 8

积分
287186
发表于 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>
复制代码
您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

锦尚中国源码论坛

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

GMT+8, 2024-12-12 03:55 , Processed in 0.110162 second(s), 25 queries .

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

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