CSS代碼:

/*圖片劃過改變圖片大小效果*/
.list ul li { width: 228px; height: 270px; overflow: hidden; z-index: 1; position:relative;}
.list ul li a {}
.list ul li a img { width: 228px; height: 270px; position: relative; -webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease; display: block;}
.list ul li a .figcaption:before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255,255,255,0.5);content: '';-webkit-transition: -webkit-transform 0.6s;transition: transform 0.6s;-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0);}
.list ul li a:hover img { transform: scale(1.5, 1.5);  -webkit-transform: scale3d(1.5,1.5); transition: .8s transform; -webkit-transition: .8s transform;}
.list ul li a:hover .figcaption:before{-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0); }
/*結(jié)束*/

HTML代碼：

<div class="list">
    <ul>
            <li>
                <a href="" title="南昌開優(yōu)網(wǎng)絡">
                    <img src="./image/shop.png" alt="">
                    <p>南昌開優(yōu)網(wǎng)絡www.568387.com</p>
                </a>

            </li>
    </ul>
</div>