css实现内容渐进移动效果

<style>
            .live_list li,.activity_list li{
                width: 393px;
                height: 445px;
                float: left;
                border-right: 1px solid rgba(216, 216, 216, 1);
                padding: 30px 35px 22px;
            }
            .live_list li .picWrap,.live_list li img{
                width: 320px;
                height: 180px;
            }
            .live_list li img{
                transform: scale(1);
            }
            .live_list li.hover img{
                transform: scale(1.1);
            }
            .live_list li h2 {
                opacity: 0;
                transform: translate3d(0,-10px,0);
            }
            .live_list li.hover h2{
                opacity: 1;
                transform: translate3d(0,0,0);
            }
            .live_list li.hover h3{
                color:rgba(221, 19, 19, 1) ;
            }
            .live_list li.hover,.live_list li:after,.live_list li.hover h3,.live_list li h2,.picWrap img{
                transition: all 1s ease;
                -webkit-transition: all 1s ease;
                -moz-transition: all 1s ease;
                -ms-transition: all 1s ease;
                -o-transition: all 1s ease;
                transition: all 1s ease;
            }
            .live_list li.hover{
                border-radius: 4px;
                box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.23), 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
                border-color: rgba(216, 216, 216, 0);
            }
        </style>

        <ul class="live_list clearfix">
            <li class="preview">
                <a href="" target="_blank">
                    <h2>01.12<span>DES 20:00</span></h2>
                    <h3>标题标题标题标题标题标题标题</h3>
                    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                    <span class="picWrap">
                        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" />
                    </span>
                    <div class="live_bottom clearfix">
                        <span class="item_more">立即预约</span>
                        <span class="order_num">256人预约</span>
                    </div>
                </a>
            </li>
        </ul>

        <script type="text/javascript">
            $(function () {
                $('.live_list li').hover(function () {
                    $(this).addClass('hover');
                    $(this).siblings('li').removeClass('hover');
                },function () {
                    $(this).removeClass('hover');
                });
            });
        </script>

标签：216,hover,渐进,list,li,live,内容,移动,css
来源： https://blog.csdn.net/abiao555/article/details/113609119