.grid-box{
                        position: relative;
                        width: 280px;
                        height: 220px;
                        overflow: hidden;
                        border-radius: 10px;
                        border: 10px solid #dee5e1;
                        margin: 0 auto;
                    }

                    .pic1, .pic2{
                        font-size: 0;
                        box-sizing: content-box;
                        width: 260px;
                        height: 200px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        cursor: pointer;
                    }
                    .pic1 li{
                        width: 50%;
                        height: 100px;
                        position: relative;
                        overflow: hidden;
                        float: left;
                    }

                    .pic1 li > img{
                        position: absolute;
                    }
                     .pic1 li > img,.pic1:hover li > img,.pic2 , .grid-box:hover .pic2{
                        transition: all 0.5s ease;
                    }
                    .pic1 li:nth-child(1) img{
                        left:0;
                        top:0;
                    }
                    .pic1 li:nth-child(2) img{
                        left: -130px;
                        top: 0;
                    }
                    .pic1 li:nth-child(3) img{
                        left:0;
                        top: -100px;
                    }
                    .pic1 li:nth-child(4) img{
                        left: -130px;
                        top: -100px;
                    }
                    .pic2{
                        transform: scale(1.5);
                        -o-transform: scale(1.5);
                        -moz-transform: scale(1.5);
                        background: url("../image/about2.jpg") no-repeat center;
                        background-size: cover;
                        z-index: -1;
                    }
                    .grid-box:hover .pic2{
                        transform: scale(1);
                        -o-transform: scale(1);
                        -moz-transform: scale(1);
                        display: block;
                    }
                    .pic1:hover li:nth-child(1) img{
                        /*向下滑*/
                        top:100px;
                    }
                    .pic1:hover li:nth-child(2) img{
                        /*向左滑*/
                        left: -260px;
                    }
                    .pic1:hover li:nth-child(3) img{
                        /*向右滑*/
                        left: 130px;
                    }
                    .pic1:hover li:nth-child(4) img{
                        /*向上滑*/
                        top: -260px;
                    }