CSS3小米官网hover列表图片上移，悬停阴影效果

CSS3小米官网hover列表图片上移，悬停阴影效果

点击查看演示

一、案例分析

1、无序列表li中的img我们需要指定大小，设置li浮动，让其并排显示。

2、给包裹图片的.pic盒子设置下外边距，给.title的h3标签设置下外边距，给.desc的p标签设置下外边距。

3、给无序列表li添加transition过渡动画。

4、鼠标悬停到无序列表li的时候，让其向上平移10像素，并且产生一个阴影效果box-shadow: 0 5px 15px #e5e5e5;。

二、HTML源代码

    <div class="wrapper">
        <ul>
            <li>
                <div class="pic"><img src="./img/pic_01.jpg" alt=""></div>
                <h3 class="title"><a href="">米家扫地机器人</a></h3>
                <p class="desc">远程智能控制，扫得干净扫得快</p>
                <p class="price"><span>1699</span>元</p>
            </li>
            <li>
                <div class="pic"><img src="./img/pic_02.jpg" alt=""></div>
                <h3 class="title"><a href="">米家扫地机器人</a></h3>
                <p class="desc">远程智能控制，扫得干净扫得快</p>
                <p class="price"><span>1699</span>元</p>
            </li>
            <li>
                <div class="pic"><img src="./img/pic_03.jpg" alt=""></div>
                <h3 class="title"><a href="">米家扫地机器人</a></h3>
                <p class="desc">远程智能控制，扫得干净扫得快</p>
                <p class="price"><span>1699</span>元</p>
            </li>
        </ul>
    </div>

三、CSS源代码

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        a,img{
            border: 0;
        }
        a{
            color: #333;
            text-decoration: none;
        }
        a:hover{
            color: #333;
            text-decoration: underline;
        }
        .wrapper{
            width: 840px;
            height: 370px;
            background: #f7f7f7;
            margin: 0 auto;
            margin-top: 100px;
            overflow: hidden;
        }
        .wrapper ul{
            margin-top: 30px;
        }
        .wrapper li{
            width: 240px;
            height: 300px;
            background: #fff;
            color: #fff;
            text-align: center;
            font-weight: bold;
            float: left;
            margin-left: 30px;
        }
        .wrapper li .pic{
            margin: 0 0 30px 0;
        }
        .wrapper li .pic img{
            width: 160px;
            height: 160px;
        }
        .wrapper li .title{
            margin: 0 10px 2px;
        }
        .wrapper li .title a{
            color: #333;
            display: block;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            _zoom:1;
        }
        .wrapper li .desc{
            margin: 0 10px 10px;
            height: 18px;
            color: #b0b0b0;
            font-size: 12px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            _zoom:1;
        }
        .wrapper li .price{
            margin: 0 10px 14px;
            color: #ff6700;
        }
        .wrapper li{
            transition: all 0.4s ease-in-out;
        }
        .wrapper li:hover{
            transform: translate(0,-10px);
            box-shadow: 0 5px 15px #e5e5e5;
        }
    </style>