css实现鼠标滑过图片 放大阴影（3D）效果

首先上两张图，对比一下 鼠标未经过和鼠标悬浮的效果

中间还有动画效果，要自己看效果才能体会了，下面上代码

 

 

  // css    
       div{
            text-align: center;
        }
        a{
            display: inline-block;
            text-decoration: none;
            transition: all .3s ease;
        }
        a:hover {
            transform: translateY(-6px);
            -webkit-transform: translateY(-6px);
            -moz-transform: translateY(-6px);
            box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
            -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
            -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
        }
        .i-subject-head{
            overflow: hidden;
        }
        .i-subject-wrap img{
            width: 100%;
            -webkit-transition: -webkit-transform .3s;
        }
        a:hover .i-subject-wrap img{
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }

<div>
    <a href="" target="_blank" title="">
        <div class="i-subject-wrap">
            <div class="i-subject-head">
                <img src="http://cdn.alloyteam.com/assets/img/alloystick-d2c55e.jpg">
            div>

        div>
    a>
div>

 

转载于:https://www.cnblogs.com/wjunwei/p/8930183.html