css动画鼠标浮上图片变大，遮罩层下来

最新推荐文章于 2021-08-04 03:19:34 发布

frida522

最新推荐文章于 2021-08-04 03:19:34 发布

阅读量416

点赞数

分类专栏：常用网站效果

本文链接：https://blog.csdn.net/weixin_37860686/article/details/79610831

版权

常用网站效果专栏收录该内容

12 篇文章 0 订阅

订阅专栏

直接甩代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3遮罩</title>
    <style type="text/css">
        .container-a4{
            width: 800px;
            max-width: 800px;
            margin: 30px auto;
        }
        .caption-style-4{
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .caption-style-4 li{
            float: left;
            padding: 0px;
            position: relative;
            overflow: hidden;
        }
        .caption-style-4 li:hover .caption{
            opacity: 1;
        }
        .caption-style-4 li:hover img{
            opacity: 1;
            /*opacity为1时为不透明*/
            transform: scale(1.15,1.15);
            -webkit-transform: scale(1.15,1.15);
            -moz-transform: scale(1.15,1.15);
            -o-transform: scale(1.15,1.15);
            -ms-transform: scale(1.15,1.15);
        }
        .caption-style-4 img{
            margin: 0px;
            padding: 0px;
            float: left;
            z-index: 4;
        }
        .caption-style-4 .caption{
            cursor: pointer;
            position: absolute;
            opacity: 0;
            -webkit-transition: all 0.45s ease-in-out;
            -moz-animation:all 0.45s ease-in-out ;
            -o-animation: all 0.45s ease-in-out;
            transition: all 0.45s ease-in-out;
            /*ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。*/
        }
        .caption-style-4 img{
            -webkit-transition: all 0.25s ease-in-out;
            -moz-animation:all 0.25s ease-in-out ;
            -o-animation: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
        }
        .caption-style-4 .blur{
            background-color: rgba(0,0,0,0.65);
            /*透明度*/
            height: 300px;
            width: 400px;
            position: absolute;
        }
        .caption-style-4 .caption-text h1{
            text-transform: uppercase;
            /*转换成大写字母*/
            font-size: 24px;
        }
        .caption-style-4 .caption-text {
            color: #ffffff;
            position: absolute;
            width: 400px;
            height: 300px;
            text-align: center;
            top: 100px;
        }


    </style>
</head>
<body>
<div class="container-a4">
    <ul class="caption-style-4">
        <li>
            <img src="img/chaps_1x.jpg">
            <div class="caption">
                <div class="blur"></div>
                <div class="caption-text">
                    <h1>Amazing Test</h1>
                    <p>This is a Amazing Test blur</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/everycowboy_dribbbleready_shot.jpg">
            <div class="caption">
                <div class="blur"></div>
                <div class="caption-text">
                    <h1>Amazing Test</h1>
                    <p>This is a Amazing Test blur</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/ithinkican_01.jpg">
            <div class="caption">
                <div class="blur"></div>
                <div class="caption-text">
                    <h1>Amazing Test</h1>
                    <p>This is a Amazing Test blur</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/m.jpg">
            <div class="caption">
                <div class="blur"></div>
                <div class="caption-text">
                    <h1>Amazing Test</h1>
                    <p>This is a Amazing Test blur</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/raspberry.jpg">
            <div class="caption">
                <div class="blur"></div>
                <div class="caption-text">
                    <h1>Amazing Test</h1>
                    <p>This is a Amazing Test blur</p>
                </div>
            </div>
        </li>
        <li>
            <img src="img/sketch_1x.jpg">
            <div class="caption">
                <div class="blur"></div>
                <div class="caption-text">
                    <h1>Amazing Test</h1>
                    <p>This is a Amazing Test blur</p>
                </div>
            </div>
        </li>

    </ul>
</div>

</body>
</html>