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

标题: css 实现鼠标移入图片显示遮罩层 [打印本页]
作者: 洪七公    时间: 2022-12-7 14:58
标题: css 实现鼠标移入图片显示遮罩层


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

  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>
复制代码




欢迎光临 源码论坛,商业源码下载,尽在锦尚中国商业源码论坛 (https://bbs.52jscn.com/) Powered by Discuz! X3.3