鼠标滑过图片文字遮罩效果

最新推荐文章于 2022-05-07 16:01:41 发布
最新推荐文章于 2022-05-07 16:01:41 发布
阅读量3k 收藏 41
点赞数 10
分类专栏： HTML/CSS 文章标签： css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40976321/article/details/104527263
版权

常见的鼠标滑过图片文字遮罩效果

效果展示地址：http://muchen.96cloud.cn:92/

源码下载：

链接：https://pan.baidu.com/s/1LzlbACxjAg6eO4d6zlK23w 
提取码：nwhb

一、从底部上升的遮罩效果：

 

解析：

完整实例代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入ElementUI  CDN -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>鼠标停浮效果</title>
</head>
<style type="text/css">
    h2 {
        text-align: center;
    }

    .section-one {
        position: relative;
        width: 1000px;
        margin: 0 auto;
        text-align: center;
        /*中心内容居中*/
        /* border: 1px solid red; */
    }

    .section-one>* {
        border: 1px solid red;
    }

    .list-one-box {
        position: relative;
        display: inline-block;
        width: 300px;
        height: 200px;
        border: 1px solid;
        margin: 10px 10px;
    }

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

    .div-mask-one {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.7);
        /* 垂直居中展示 注意点 如果使用绝对居中，其内容内容要用一个div包起来 */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 16px;
        color: #ffffff;
        transition: height 300ms
    }

    .list-one-box:hover .div-mask-one {
        height: 100%;
        transition: height 500ms
    }

    .mask-one-p{
        display: none;
    }

    .div-mask-one:hover .mask-one-p{
        display: block;
    }

</style>

<body>
    <div id="app">
        <h2>一、从底部上升遮罩效果</h2>
        <div class="section-one">
            <div class="list-one-box">
                <img src="../image/timg.jpg" alt="">
                <div class="div-mask-one">
                    <div>
                        <p>图片一</p>
                        <p class="mask-one-p">图片一内相关描述内容</p>
                    </div>
                </div>
            </div>
            <div class="list-one-box">
                <img src="../image/timg2.jpg" alt="">
                <div class="div-mask-one">
                    <div>
                        <p>图片二</p>
                        <p class="mask-one-p">图片二内相关描述内容</p>
                    </div>
                </div>
            </div>
            <div class="list-one-box">
                <img src="../image/timg3.jpg" alt="">
                <div class="div-mask-one">
                    <div>
                        <p>图片三</p>
                        <p class="mask-one-p">图片三内相关描述内容</p>
                    </div>
                </div>
            </div>
        </div>

    </div>

</body>
<!-- 引入vue组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    //注册使用vue
    var Vue = window.Vue;
    var app = new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        methods: {

        }

    })

</script>

</html>

 

 

二、直接显示遮罩效果

 

代码解析：

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入ElementUI  CDN -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>鼠标停浮效果</title>
</head>
<style type="text/css">
    h2 {
        text-align: center;
    }

    .section-one {
        position: relative;
        width: 1000px;
        margin: 0 auto;
        text-align: center;
        /*中心内容居中*/
        /* border: 1px solid red; */
    }

    .section-one>* {
        border: 1px solid red;
    }

    .list-one-box {
        position: relative;
        display: inline-block;
        width: 300px;
        height: 200px;
        border: 1px solid;
        margin: 10px 10px;
    }

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

    .div-mask {
        /* 通过绝对定位 覆盖原图 */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        font-size: 16px;
        color: #ffffff;
        /* 垂直居中 */
        display: flex;
        justify-content: center;
        /* 弹性布局的左右居中对齐 */
        align-items: center;
        /*弹性布局的垂直居中对齐*/
        text-align: center;
        /*文本居中*/
        display: none;
    }

    .list-one-box:hover .div-mask {
        display: flex;
    }
</style>

<body>
    <div id="app">
        <!-- 直接显示遮罩效果实现原理解析：
            1.在图片和遮罩区域的父级div  设置为相对定位  position: relative;   并且设置宽高;
            2.图片与遮罩区都在同一级别，且遮罩区设置为绝对定位  position: absolute; top: 0;left: 0; 使得遮罩区完全覆盖图片；
            3.遮罩区使用弹性布局全局居中展示： display: flex;justify-content: center;align-items: center;text-align: center;
            4.遮罩层设置display:none;当触碰到父级div时 遮罩区display: flex; 展示出来
        -->
        <h2>二、直接显示遮罩效果</h2>
        <div class="section-one">
            <div class="list-one-box">
                <img src="../image/timg4.jpg" alt="">
                <div class="div-mask">
                    <div>
                        <p>文本标题二</p>
                        <p>文本内容二</p>
                    </div>
                </div>
            </div>
            <div class="list-one-box">
                <img src="../image/timg5.jpg" alt="">
                <div class="div-mask">
                    <div>
                        <p>文本标题二</p>
                        <p>文本标题二</p>
                    </div>
                </div>
            </div>
            <div class="list-one-box">
                <img src="../image/timg.jpg" alt="">
                <div class="div-mask">
                    <div>
                        <p>文本标题二</p>
                        <p>文本标题二</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<!-- 引入vue组件库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    //注册使用vue
    var Vue = window.Vue;
    var app = new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        methods: {

        }

    })

</script>

</html>

 

三、从侧部显示遮罩效果

代码解析：

CSS代码：

 .div-mask3{
        /* 通过绝对定位 覆盖原图 */
        position: absolute;
        top: 0;
        left: 0;
        width: 0px;
        height: 0px;
        background-color: rgba(0, 0, 0, 0.4);
        font-size: 16px;
        color: #ffffff;
        /* 垂直居中 */
        display: flex;
        justify-content: center;
        /* 弹性布局的左右居中对齐 */
        align-items: center;
        /*弹性布局的垂直居中对齐*/
        text-align: center;
        /*文本居中*/
        /* display: none; */
        transition: all 700ms;
    }

    .list-one-box:hover .div-mask3 {
        width: 100%;
        height: 100%;
        transition: all 700ms;
    }
    .maske-div{
        display: none;
        transition: all 700ms;
    }
    .div-mask3:hover .maske-div{
        display: block;
        transition: all 700ms;
    }

HTML代码：

 <h2>三、从侧部显示遮罩效果</h2>
        <div class="section-one">
            <div class="list-one-box">
                <img src="../image/timg.jpg" alt="">
                <div class="div-mask3">
                    <div class="maske-div">
                        <p>文本标题三</p>
                        <p>文本内容三</p>
                    </div>
                </div>
            </div>
            <div class="list-one-box">
                <img src="../image/timg2.jpg" alt="">
                <div class="div-mask3">
                    <div class="maske-div">
                        <p>文本标题三</p>
                        <p>文本标题三</p>
                    </div>
                </div>
            </div>
            <div class="list-one-box">
                <img src="../image/timg3.jpg" alt="">
                <div class="div-mask3">
                    <div class="maske-div">
                        <p>文本标题三</p>
                        <p>文本标题三</p>
                    </div>
                </div>
            </div>
        </div>

四、从左侧滑入显示遮罩效果

 

代码解析：

CSS代码：

.div-mask4{
        /* 通过绝对定位 覆盖原图 */
        position: absolute;
        top: 0;
        left: 0;
        width: 0px;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        font-size: 16px;
        color: #ffffff;
        /* 垂直居中 */
        display: flex;
        justify-content: center;
        /* 弹性布局的左右居中对齐 */
        align-items: center;
        /*弹性布局的垂直居中对齐*/
        text-align: center;
        /*文本居中*/
        /* display: none; */
        transition: all 700ms;
    }

    .list-one-box:hover .div-mask4 {
        width: 100%;
        transition: width 700ms;
    }
    .maske-div{
        display: none;
        transition: width 700ms;
    }
    .div-mask4:hover .maske-div{
        display: block;
        transition: width 700ms;
    }

HTML代码：

 <h2>四、从左侧滑入显示遮罩效果</h2>
        <div class="section-one">
            <div class="list-one-box">
                <img src="../image/timg.jpg" alt="">
                <div class="div-mask4">
                    <div class="maske-div">
                        <p>文本标题四</p>
                        <p>文本内容四</p>
                    </div>
                </div>
            </div>
            <div class="list-one-box">
                <img src="../image/timg2.jpg" alt="">
                <div class="div-mask4">
                    <div class="maske-div">
                        <p>文本标题四</p>
                        <p>文本标题四</p>
                    </div>
                </div>
            </div>
            <div class="list-one-box">
                <img src="../image/timg3.jpg" alt="">
                <div class="div-mask4">
                    <div class="maske-div">
                        <p>文本标题四</p>
                        <p>文本标题四</p>
                    </div>
                </div>
            </div>
        </div>

 

Muchen灬
关注
  • 10
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标悬停，图片出现遮罩效果
09-14
鼠标悬停在图片上，图片从四个方向出现遮罩层效果；并伴随文字出现；鼠标离开遮罩层消失，并伴随文字消失；
jquery-图片展示-鼠标滑过图片文字遮罩
07-17
利用jquery插件做的一个图片展示效果，鼠标滑过有文字遮罩效果出现
鼠标滑过图片，图片上出现一个遮罩层并显示图片的提示文字
热门推荐
肖肖肖丽珠的博客
07-19 2万+
html的内容：                                   //图片                       //提示文字                         这里是新闻标题简要介绍一下吗                                 样式设置如下： //首先确定遮罩层的大小 .ih-i
CSS3鼠标悬停图片显示遮罩特效代码
06-11
这是一款基于CSS3实现的鼠标移到图片上显示遮罩显示文字信息，Bootstrap鼠标悬停图片遮罩特效代码。
js和css两种实现鼠标经过图片时显示透明框的遮罩条文字-动画
眼里长着太阳，笑里全是坦荡
01-19 8224
介绍两种方法 1.js实现 2.css实现 先说js实现 1.将图片设置为div的背景，鼠标移动到上面的时候触发事件，代码如下 美丽的三亚 2.中间文字p的css样式，display设置为none，不显示，鼠标移动到上面时才显示 .img p{ position: absolute; bottom: 0;
js实现鼠标移动到图片产生遮罩效果
10-19
主要为大家详细介绍了js实现鼠标移动到图片产生遮罩效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端 鼠标滑过图片透明文字遮罩向上滑出效果 动画
滚滚_1016的程序媛
05-07 757
<div style="display: inline-block;"> <h3>鼠标滑过图片透明文字遮罩向上滑出效果</h3> <div class="parent-hover-class" @mouseenter="clickShow(item, true)" @mouseleave="clickShow(item, false)" v-for="(item, index) in imageList" :k...
鼠标移上图片遮罩层的显示隐藏
AlexPG12138的博客
06-13 657
<li class="floatL proLink"> <a href=""> <img src="img/index-smallPic1.jpg" alt="" class="proLinkBg"/> </a> <a href="" style="display: none;" class="opacity"> <div class="opa
html5 图片 遮罩层,12种炫酷的CSS3鼠标滑过图片遮罩层动画特效
weixin_35084134的博客
05-30 640
InContent是一款效果非常炫酷的CSS3鼠标滑过图片遮罩层动画特效。这组特效共有12种不同的鼠标滑过图片效果，分为滑动、旋转和翻转3大类。它可以在支持CSS3 transition和transform属性的现代浏览器中正常工作。使用方法使用该CSS3鼠标滑过图片遮罩层动画特效需要在页面中引入由SASS编译的sass-compiled.css文件或由LESS编译的less-compiled.c...
简单的CSS3鼠标滑过图片标题和遮罩层动画特效
ardq77430的博客
08-12 487
此文转自：http://www.cnblogs.com/w2bc/p/5735300.html，仅供本人学习参考，版权归原作者所有！ 这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特效。该鼠标滑过特效通过CSS3transitions 和 transform 属性，在鼠标滑过图片时制作遮罩层和图片标题动画效果。 在线预览源码下载 使用方法...
CSS3鼠标经过图片遮罩层代码.zip
07-04
CSS3鼠标经过图片遮罩层代码基于Bootstrap3.3.5制作，自适应分辨率，兼容PC端和移动端，CSS3鼠标悬停动画效果遮罩层。
jQuery鼠标经过图片遮罩层效果.zip
07-05
jQuery鼠标经过图片遮罩层效果基于jquery1.42.min.js制作，鼠标跟随效果。
纯css3鼠标滑过图片文字遮罩动画特效
11-18
纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效 纯css3鼠标滑过图片文字遮罩动画特效
jQuery鼠标滑过图片出现遮罩层和标题
11-17
jQuery鼠标滑过图片出现遮罩层和标题
css3鼠标滑过图片遮罩层动画效果
12-13
这是一款css3鼠标滑过图片遮罩层动画效果。在该特效中，当用户鼠标滑过或悬停在图片上时，遮罩层以十字架开始扩大为矩形，然后出现描述文字和链接图标，效果非常炫酷。
鼠标悬停图片遮罩文字从左滑出
06-04
鼠标悬停图片遮罩文字从左滑出
html鼠标经过有遮罩层,jQuery实现鼠标滑过遮罩并高亮显示效果
weixin_29328371的博客
05-30 294
鼠标滑过遮罩高亮效果*{padding:0;margin:0;}ul,li{list-style:none;}.picshow{float:left;padding:4px 0;width:760px;position:relative;}.picshow li{float:left;height:160px;width:190px;background:http://www.875.cn/000...
html鼠标经过遮罩层怎么实现,CSS如何实现鼠标移至图片上显示遮罩层效果 CSS实现鼠标移至图片上显示遮罩层效果实例...
weixin_30698775的博客
05-31 1294
本篇文章小编给大家分享一下CSS实现鼠标移至图片上显示遮罩层效果实例，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。1、将遮罩层html代码与图片放在一个div我是放在 .img_div里。2、为图片及遮罩层添加样式图片：relative遮罩层：absolute使两者样式重合。鼠标不在图片上时，遮罩层不显示 .mask { opacity: 0; } 。.img_div ...
JS、CSS鼠标滑过图片显示遮罩层和小眼睛（:hover::before、:hover::after、pointer-events）
huangfuyk.的博客
08-23 1214
做项目时遇到这样一个需求：鼠标滑过图片显示遮罩层和小眼睛，点击图片可放大预览，一般情况下我们会直接使用UI组件来实现，但是今天我要说的是用CSS实现。 HTML代码如下（示例）： <nz-image-group *ngFor="let img of gooddetail.certificate"> <div class="play-img-box"> <img class="play-img" nz-image width="80px" height="80px"
css如何实现鼠标移至图片上显示遮罩层及文字
最新发布
06-28
### 回答1： 可以使用CSS中的伪类:hover来实现鼠标移至图片上显示遮罩层及文字的效果。具体实现方法如下： 1. 首先，在HTML中添加一个包含图片的容器，例如： <div class="img-container"> <img src="image.jpg" alt="图片"> <div class="overlay"> <p>这是图片的描述文字</p> </div> </div> 2. 在CSS中设置容器的position为relative，遮罩层的position为absolute，并设置其宽度、高度、背景颜色和透明度等样式，例如： .img-container { position: relative; } .overlay { position: absolute; top: ; left: ; width: 100%; height: 100%; background-color: rgba(, , , .5); opacity: ; transition: opacity .3s ease; } 3. 当鼠标移至容器上时，使用:hover伪类来改变遮罩层的透明度，例如： .img-container:hover .overlay { opacity: 1; } 4. 最后，为遮罩层中的文字设置样式，例如： .overlay p { color: #fff; font-size: 16px; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 这样就可以实现鼠标移至图片上显示遮罩层及文字的效果了。 ### 回答2： 在CSS中实现鼠标移至图片上显示遮罩层及文字可以使用以下步骤： 1. 首先，我们需要一个容器来放置图片和遮罩层以及文字。可以使用div元素来作为容器，也可以使用figure元素。 2. 接着，为容器设置一个相对定位的位置，并将其宽度和高度设置为图片的宽度和高度。这里需要使用绝对定位的元素作为遮罩层并将其位置设置为0。 3. 给遮罩层添加半透明的背景色，并设置其宽度和高度为百分比。这里建议使用rgba颜色值来设置背景色，以便于调整透明度。 4. 最后，使用绝对定位的元素在遮罩层上添加文字。可以使用text-align属性来设置文字居中对齐。 下面是实现鼠标移至图片上显示遮罩层及文字的CSS代码和示例： HTML代码： ``` <div class="container"> <img src="image.jpg"> <div class="mask"> <p>这是一段文字</p> </div> </div> ``` CSS代码： ``` .container { position: relative; width: 300px; height: 200px; } img { width: 100%; height: 100%; } .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.2s ease-in-out; } .mask p { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; font-size: 20px; } .container:hover .mask { opacity: 1; } ``` 在上述示例中，我们设置了一个名为“container”的div元素来放置图片和遮罩层以及文字。在CSS中，我们为容器设置了一个相对定位的位置，并将其宽度和高度设置为300px和200px来适应图片的大小。 接着，我们添加了一张图片，并使用CSS将其宽度和高度设置为100%。这样可以确保图片始终占满整个容器。 然后，我们为容器添加了一个名为“mask”的div元素来作为遮罩层，并为其设置了绝对定位和宽度和高度为100%的百分比。同时，我们使用rgba(0, 0, 0, 0.5)设置了一个半透明的黑色背景色来让图片透出一些颜色。 最后，我们在遮罩层上添加了一段文字，并使用CSS将其位置居中对齐，并使用白色字体进行渲染。 我们还在容器的:hover伪类选择器中，使用transition属性将遮罩层的不透明度设置为0.2秒的过渡效果，并在鼠标移至容器时改变其不透明度值以显示遮罩层，从而实现了鼠标移至图片上显示遮罩层及文字的效果。 ### 回答3： 鼠标移至图片上显示遮罩层及文字，可以使用CSS来实现。具体实现方式如下： 1.先在HTML中放置图片 2.使用CSS设置该图片的位置和大小，并设置其为相对定位。 3.在HTML中创建遮罩层的div，并使用CSS设置其样式和位置，将其设置为绝对定位，覆盖在图片上方。 4.为遮罩层div中添加文字，并使用CSS设置文字的样式和位置。 5.使用CSS设置当鼠标覆盖在图片上时，遮罩层和文字的样式，可以设置遮罩层的透明度为0，当鼠标覆盖在图片上时，将遮罩层的透明度设置为1。 6.最后，当鼠标移开图片时，将遮罩层的透明度设置为0。 总结： 使用CSS实现鼠标移至图片上时显示遮罩层及文字的效果，需要设置图片的样式和位置，创建遮罩层的div，并将其覆盖在图片上方。然后设置遮罩层和文字的样式，当鼠标覆盖在图片上时，将遮罩层的透明度设置为1，鼠标移开时设置为0。这样就可以实现这个效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值