css3鼠标悬停图片特效，图片悬停效果源码

最新推荐文章于 2024-06-01 09:37:43 发布

正在修炼web的小芮

最新推荐文章于 2024-06-01 09:37:43 发布

阅读量411

点赞数 1

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

本文链接：https://blog.csdn.net/m0_71814235/article/details/126060153

版权

  <style>
        @import url("./style.css");
        *{
            box-sizing: border-box;
        }
        body{
            margin: 0;
            width: 100%;
            height: 100vh;
            font-family: Georgia, 'Times New Roman', Times, serif;
        }
        .header{
            font-size: 24px;
            text-align: center;
        }
        .container{
            width: 100%;
            max-width: 1200px;
            border-radius: 4px;
            margin: 0 auto;
            padding: 40px 0;
        }
        .content{
            display: flex;
            flex-wrap: wrap;
            margin-top: 60px;
            padding: 0 30px;
        }
        .wrapper{
            width: 33.3%;
            height: 100%;
            padding: 10px;
        }
        .name{
            position: relative;
            font-size: 16px;
            display: inline-block;
        }
        .name:after{
            content: "";
            position: absolute;
            width: calc(100% + 10px);
            height: 1px;
            background-color: #000;
            bottom: -4px;
            left: 0;
        }
        .box{
            position: relative;
            max-height: 300px;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 1.4px 1.7px rgba(0, 0, 0, 0.017),0 3.3px 4px rgba(0,0,0,0.024),0 6.3px 7.5px rgba(0,0,0,0.03),0 11.2px 13.4px rgba(0,0,0,0.036), 0 20.9px 25.1px rgba(0,0,0,0.043), 0 50px 60px rgba(0, 0, 0, 0.06);
         }
         .box .hide{
            opacity: 0;
         }
         .box .frame{
            position: absolute;
            border: 1px solid #fff;
            z-index: 2;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
         }
         .box h2, .box p{
            position: absolute;
            color: #fff;
            z-index: 2;
            width: 100%;
            transition: opacity 0.2s,transform 0.3s;
         }
         .box h2{
            font-weight: 500;
            font-size: 22px;
            margin-bottom: 0;
            letter-spacing: 1px;
         }
         .box p{
            bottom: 0;
            font-size: 14px;
            letter-spacing: 1px;
         }
         .box:hover{
            transition: all 0.3s ease-in-out;
         }
         .box:hover::before{
            transition: all 0.3s ease-in-out;
         }
         .box img{
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
            transition: all 0.3s ease-in-out;
         }
         .box img:hover{
            transition: all 0.3s ease-in-out;
         }
         .box img:after{
            content: "";
            position: absolute;