|
这个是我自己使用的,完全可以使用的,请仔细看一下:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- .image-div {
- width: 300px;
- height: 300px;
- position: relative;
- }
- .image-div img {
- width: 300px;
- height: 300px;
- }
- .image-mask {
- position: absolute;
- width: 100%;
- height: 100%;
- bottom: 0;
- background: rgba(101, 101, 101, 0.6);
- color: #ffffff;
- opacity: 0;
- line-height: 300px;
- }
- .image-div:hover .image-mask {
- opacity: 1;
- cursor: default;
- }
- </style>
- </head>
- <body>
- <div class="image-div">
- <img src="img/38.jpg">
- <div class="image-mask"></div>
- </div>
- </body>
- </html>
复制代码 |
|