有些商家不喜欢被模块束缚 ，又想做特效，也不想被京东的990宽度束缚。
当然有些商家也不想花钱买模板还想达到特效

今天我给大家分享一个 1200px宽度 在自定义内容区模块里实现 鼠标滑过 商品图变化的特效代码

<style type="text/css">
    .user-product {
        width: 380px;
    }
    .user-product_text {
        border: 10px solid #283c4b;
        height: 360px;
        width: 360px;
    }
    .user-product_dw {
        position: absolute;
    }
    .user-product_text .user-pro_xj1 {
        opacity: 0;
    }
    .user-product_text:hover .user-pro_xj1 {
        opacity: 100;
    }
    .user-product_text .user-pro_xj1 {
        transition: all 0.1s ease-in-out 0s;
    }</style>
<div style="width:1200px; margin:0 auto;">
    <div style="margin-top:30px;">
        <div style="float:left;" class="user-product">
            <div class="user-product_text">
                <span> <a target="blank" href="#"> <span class="user-pro01 user-productdw"><img src="http://img10.360buyimg.com/imgzone/jfs/t322/77/1478249532/64678/600e8e6/543aaa24N50cb3bff.jpg" alt="" /></span> <span class="user-pro_xj1 user-product_dw"><img src="http://img10.360buyimg.com/imgzone/jfs/t340/163/1429868373/57749/5986009e/543aaa22N456764a2.jpg" alt="" /></span> </a> </span>
            </div>
            <div>
                <img src="http://img10.360buyimg.com/imgzone/jfs/t346/347/1466222415/3858/e0d8f375/543aaa20N6083722b.jpg" alt="" />
            </div>
        </div>
        <div style="float:left;margin-left:30px;" class="user-product">
            <div class="user-product_text">
                <span> <a target="blank" href="#"> <span class="user-pro01 user-productdw"><img src="http://img10.360buyimg.com/imgzone/jfs/t322/77/1478249532/64678/600e8e6/543aaa24N50cb3bff.jpg" alt="" /></span> <span class="user-pro_xj1 user-product_dw"> <img src="http://img10.360buyimg.com/imgzone/jfs/t340/163/1429868373/57749/5986009e/543aaa22N456764a2.jpg" alt="" /></span> </a> </span>
            </div>
            <div>
                <img src="http://img10.360buyimg.com/imgzone/jfs/t346/347/1466222415/3858/e0d8f375/543aaa20N6083722b.jpg" alt="" />
            </div>
        </div>
        <div style="float:right;" class="user-product">
            <div class="user-product_text">
                <span> <a target="blank" href="#"> <span class="user-pro01 user-productdw"><img src="http://img10.360buyimg.com/imgzone/jfs/t322/77/1478249532/64678/600e8e6/543aaa24N50cb3bff.jpg" alt="" /></span> <span class="user-pro_xj1 user-product_dw"> <img src="http://img10.360buyimg.com/imgzone/jfs/t340/163/1429868373/57749/5986009e/543aaa22N456764a2.jpg" alt="" /> </a></span> </span>
            </div>
            <div>
                <img src="http://img10.360buyimg.com/imgzone/jfs/t346/347/1466222415/3858/e0d8f375/543aaa20N6083722b.jpg" alt="" />
            </div>
        </div>
    </div>
    <div style="clear:both;margin:0;padding:0;height:0;">
    </div>
</div>

大家在使用中记得把淘宝的图片地址换成京东的图片地址即可。
然后记得在100%布局里面新建自定义内容区模块，而非在990布局里新建！

给大家接一下 对应的商品特效截图

鼠标滑过后