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

最新推荐文章于 2024-09-01 13:57:04 发布

Muchen灬

最新推荐文章于 2024-09-01 13:57:04 发布

阅读量3.2k

点赞数 10

分类专栏： HTML/CSS 文章标签： css3 html5

本文链接：https://blog.csdn.net/qq_40976321/article/details/104527263

版权

HTML/CSS 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

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

效果展示地址：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>