网站产品列表鼠标经过出现滑动动画效果css+jquery特效

.cui-product-panel{position: relative;padding-bottom: 75px;margin-top: 55px;}
.cui-product-panel .hd-title,.product-view .hd-title{margin-bottom: 25px;display: block; text-align: left;}
.cui-product-panel .hd-title h2,.product-view .hd-title h2{height: 18px;line-height: 18px;border-left: 3px solid #12a4e1;padding-left: 15px;font-weight: bold;}

.cui-product-panel .cui-product-panel-list {
    background: #f5f8f9;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(7, 61, 125, .16)
}

.cui-product-panel .cui-product-panel-list>li {
    position: relative;
    cursor: default
}
.cui-product-panel .cui-product-panel-list>li .c-icon{width: 83px;height: 83px;display: block;background: url(../images/style-icons.png) no-repeat;margin: 24px auto 24px auto;}
.cui-product-panel .cui-product-panel-list>li .big-data{background-position: 0 -337px;}
.cui-product-panel .cui-product-panel-list>li .xycy{background-position: -85px -337px;}
.cui-product-panel .cui-product-panel-list>li .jszx{background-position: -170px -337px;}

.cui-product-panel .cui-product-panel-list>li h4 {
    color: #4a4a4a;
    font-size: 26px;
    padding: 30px 20px 0;
    line-height: 58px;
    -webkit-transition: color .3s ease, -webkit-transform .3s ease;
    transition: color .3s ease, -webkit-transform .3s ease;
    transition: color .3s ease, transform .3s ease;
    transition: color .3s ease, transform .3s ease, -webkit-transform .3s ease
}

.cui-product-panel .cui-product-panel-list>li .cui-product-panel-list-note {
    color: #7d7e7e;
    color: rgba(0, 0, 0, .5);
    font-size: 14px;
    padding: 20px 67px;
    -webkit-transition: -webkit-transform .3s ease .05s;
    transition: -webkit-transform .3s ease .05s;
    transition: transform .3s ease .05s;
    transition: transform .3s ease .05s, -webkit-transform .3s ease .05s
}

.cui-product-panel .cui-product-panel-list>li .cui-product-panel-list-icon {
    position: absolute;
    width: 100%;
    bottom: 90px;
    left: 0;
    color: #dcdedf;
    color: rgba(0, 0, 0, .1);
    font-size: 64px;
    visibility: visible;
    opacity: 1;
    -webkit-transition: visibility .5s ease, opacity .5s ease;
    transition: visibility .5s ease, opacity .5s ease
}

.cui-product-panel .cui-product-panel-list>li .cui-product-panel-list-button {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility .5s ease, opacity .5s ease, -webkit-transform .3s ease .15s;
    transition: visibility .5s ease, opacity .5s ease, -webkit-transform .3s ease .15s;
    transition: visibility .5s ease, opacity .5s ease, transform .3s ease .15s;
    transition: visibility .5s ease, opacity .5s ease, transform .3s ease .15s, -webkit-transform .3s ease .15s
}

.cui-product-panel .cui-product-panel-list>li .cui-product-panel-list-button button {
    border-radius:5px;
    width: 130px;
    margin: 0 auto;
    line-height: 39px;
    height: 39px;
    cursor: inherit;
    color: #666;
    font-size: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: transparent;
    -webkit-transition: color .3s ease, border-color .3s ease, background .3s ease;
    transition: color .3s ease, border-color .3s ease, background .3s ease
}

.cui-product-panel .cui-product-panel-list>li .cui-product-panel-list-detail {
    width: 100%;
    text-align: center;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform .3s ease .1s;
    transition: -webkit-transform .3s ease .1s;
    transition: transform .3s ease .1s;
    transition: transform .3s ease .1s, -webkit-transform .3s ease .1s
}

.cui-product-panel .cui-product-panel-list>li .cui-product-panel-list-detail li {
    color: #999;
    font-size: 14px;
    margin-top: 18px
}

.cui-product-panel .cui-product-panel-list>li .cui-product-panel-list-detail .c-icon {
    color: #ddd;
    margin: 0 auto;
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
    position: relative;
    top: 2px
}

.cui-product-panel .cui-product-panel-list>li>div {
    position: relative;
    z-index: 9;
    height: 320px;
    margin: 25px 0;
    -webkit-transition: border-color .3s ease;
    transition: border-color .3s ease;
    overflow: hidden
}

.cui-product-panel .cui-product-panel-list>li>div>a {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none
}

.cui-product-panel .cui-product-panel-list>li:first-child>div {
    border-left-color: transparent
}

.cui-product-panel .cui-product-panel-list>li:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    -webkit-transition: background .3s ease, box-shadow .3s ease, -webkit-transform .3s ease;
    transition: background .3s ease, box-shadow .3s ease, -webkit-transform .3s ease;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease, -webkit-transform .3s ease
}

.cui-product-panel .cui-product-panel-list>li.active:after,
.cui-product-panel .cui-product-panel-list>li:hover:after {
    z-index: 1;

    background: #fff;border-radius: 5px;box-shadow:0px 0px 5px 2px #eaeaea;
}

.cui-product-panel .cui-product-panel-list>li.active+li>div,
.cui-product-panel .cui-product-panel-list>li.active>div,
.cui-product-panel .cui-product-panel-list>li:hover+li>div,
.cui-product-panel .cui-product-panel-list>li:hover>div {
    border-left-color: transparent
}

.cui-product-panel .cui-product-panel-list>li.active h4,
.cui-product-panel .cui-product-panel-list>li:hover h4 {
    color: #333;
    -webkit-transform: translate3d(0, -37px, 0);
    transform: translate3d(0, -37px, 0);

}

.cui-product-panel .cui-product-panel-list>li.active .cui-product-panel-list-note,
.cui-product-panel .cui-product-panel-list>li:hover .cui-product-panel-list-note {
    -webkit-transform: translate3d(0, -45px, 0);
    transform: translate3d(0, -45px, 0)
}

.cui-product-panel .cui-product-panel-list>li.active .cui-product-panel-list-icon,
.cui-product-panel .cui-product-panel-list>li:hover .cui-product-panel-list-icon {
    visibility: hidden;
    opacity: 0
}

.cui-product-panel .cui-product-panel-list>li.active .cui-product-panel-list-button,
.cui-product-panel .cui-product-panel-list>li:hover .cui-product-panel-list-button {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, -40px, 0);
    transform: translate3d(0, -40px, 0)
}

.cui-product-panel .cui-product-panel-list>li.active .cui-product-panel-list-button button,
.cui-product-panel .cui-product-panel-list>li:hover .cui-product-panel-list-button button {
    color: #fff;
    border-color:rgb(36,218,217);
    background: rgb(36,218,217);background: -moz-linear-gradient(-45deg, rgba(36,218,217,1) 0%, rgba(7,133,230,1) 100%);background: -webkit-linear-gradient(-45deg, rgba(36,218,217,1) 0%,rgba(7,133,230,1) 100%);background: linear-gradient(135deg, rgba(36,218,217,1) 0%,rgba(7,133,230,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#24dad9', endColorstr='#0785e6',GradientType=1 );
}

.cui-product-panel .cui-product-panel-list>li.active .cui-product-panel-list-detail,
.cui-product-panel .cui-product-panel-list>li:hover .cui-product-panel-list-detail {
    -webkit-transform: translate3d(0, -60px, 0);
    transform: translate3d(0, -60px, 0)
}

.cui-product-panel .cui-product-panel-more {
    margin-top: 64px
}

.cui-product-panel .cui-product-panel-more a {
    color: #666;
    text-decoration: none;
    font-size: 18px;
    line-height: 36px;
    padding: 6px 26px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    -webkit-transition: color .3s ease, border-color .3s ease, background .3s ease;
    transition: color .3s ease, border-color .3s ease, background .3s ease
}

.cui-product-panel .cui-product-panel-more a:hover {color: #fff;border-color: #1ccfc9;background: #1ccfc9}
.cui-product-panel .cui-product-panel-list .c-col6 {width: 282px;height: auto;cursor: pointer; display: block;background: #fff;border-radius: 5px;box-shadow:0px 0px 5px 2px #eaeaea;float: left;margin-right: 24px; text-align: center;}
.cui-product-panel .cui-product-panel-list ul li.last{margin-right: 0;}

<!--复制这里-->
            <div class="cui-product-panel warp clearfix">
                <div class="hd-title">
                    <h2 class="font-size-18">产品中心</h2>
                </div>
                <ul class="cui-product-panel-list">
                    <li class="c-col6">
                        <div>
                            <a href="#">
                                <h4 class="c-line-clamp">投保保证保险</h4>
                                <ul class="cui-product-panel-list-detail">
                                    <li><i class="c-icon big-data"></i></li>
                                </ul>
                                <p class="cui-product-panel-list-note">面向公共资源交易投标 保函电子化 替代保证金</p>
                                <p class="cui-product-panel-list-button"><button class="cui-btn">查看详情</button></p>
                            </a>
                        </div>
                    </li>
    
                    <li class="c-col6">
                        <div>
                            <a href="#">
                                <h4 class="c-line-clamp">投保保证保险</h4>
                                <ul class="cui-product-panel-list-detail">
                                    <li><i class="c-icon xycy"></i></li>
                                </ul>
                                <p class="cui-product-panel-list-note">面向公共资源交易投标 保函电子化 替代保证金</p>
                                <p class="cui-product-panel-list-button"><button class="cui-btn">查看详情</button></p>
                            </a>
                        </div>
                    </li>
    
                    <li class="c-col6 last">
                        <div>
                            <a href="#">
                                <h4 class="c-line-clamp">投保保证保险</h4>
                                <ul class="cui-product-panel-list-detail">
                                    <li><i class="c-icon jszx"></i></li>
                                </ul>
                                <p class="cui-product-panel-list-note">面向公共资源交易投标 保函电子化 替代保证金</p>
                                <p class="cui-product-panel-list-button"><button class="cui-btn">查看详情</button></p>
                            </a>
                        </div>
                    </li>

                </ul>
                
            </div>
        <!--复制这里-->

<script type="text/javascript">
        $(function() {
            $('.cui-product-panel-list li').hover(function() {
                $(this).addClass('active').siblings().removeClass('active');
            })
        })
    </script>

引入jquery.js后可使用

效果：