鼠标放上图片，图片上方出现遮罩和文字效果

最新推荐文章于 2024-04-01 10:16:27 发布

萧逸才

最新推荐文章于 2024-04-01 10:16:27 发布

阅读量7.3k

点赞数 1

分类专栏：前端 css3 文章标签： css3

本文链接：https://blog.csdn.net/xyc_csdn/article/details/69668880

版权

前端同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

css3

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .img-box {
            width: 100px;
            height: 100px;
            display: inline-block;
            position: relative;
            cursor: pointer;
        }

        .img-box img {
            width: 100%;
            height: 100%;
        }

        .img-box::before, .img-box::after {
            z-index: 1000;
            opacity: 0;
        }

        .img-box::before {
            content: " ";
            border: 50px solid #000;
            position: absolute;
        }

        .img-box::after {
            content: attr(data-tip);
            top: -100%;
            color: #ffffff;
            position: relative;
        }

        .img-box:hover::before {
            opacity: 0.5;
        }

        .img-box:hover::after {
            opacity: 1;
        }

    </style>
</head>
<body>
<div class="img-box" data-tip="床前明月光，疑是地上霜。举头望明月，低头思故乡。">
    <img src="1.png">
</div>
</body>
</html>

前面写的代码有点问题，当时只是用google浏览器测了一下就发了，没想到火狐上有问题，所以就修改了一下，google、firefox和ie都每问题，不过data-tip中的文字不能太多，如果太多会溢出图片遮罩，这个可以根据具体情况优化一下。

萧逸才

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
鼠标放上图片，图片上方出现遮罩和文字效果

<!DOCTYPE html><html lang="zh-CN"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> * { margin: 0px; padding: 0px; }
复制链接

扫一扫