京东图片视差效果

预览效果

HTML代码

<div style="width:885px">
  <ul class="bm_picList cl">
    <li><a target="_blank" href="">
      <div class="info">
        <h3>品质家政</h3>
        <p>保姆 月嫂 育婴师</p>
        <p class="mt-15"><img src="images/btn_yuyue.png"></p>
      </div>
      <img src="images/jiazheng.jpg" class="pic"></a></li>
    <li><a class="c_white" target="_blank" href="">
      <div class="info">
        <h3>房屋租赁</h3>
        <p>二手房 租房 商底</p>
        <p class="mt-15"><img width="77" height="30" src="images/btn_fangyuan.png"></p>
      </div>
      <img src="images/zufang.jpg" class="pic"></a></li>
    <li><a target="_blank" href="">
      <div class="info">
        <h3>放心桶装水</h3>
        <p>优质品牌放心水</p>
        <p class="mt-15"><img width="80" height="30" src="images/btn_dingshui.png"></p>
      </div>
      <img src="images/songshui.jpg" class="pic"></a></li>
    <li><a target="_blank" href="">
      <div class="info">
        <h3>送餐</h3>
        <p>一次品尝多家饭店招牌菜</p>
        <p class="mt-15"><img width="80" height="30" src="images/btn_diancan.png"></p>
      </div>
      <img src="images/songcan.jpg" class="pic"></a></li>
    <li><a class="c_white" target="_blank" href="">
      <div class="info">
        <h3>快清洁</h3>
        <p>小时工 家庭保洁 公司保洁</p>
        <p class="mt-15"><img width="80" height="29" src="images/btn_yuyue2.png"></p>
      </div>
      <img src="images/baojie.jpg" class="pic"></a></li>
    <li><a class="c_white" target="_blank" href="">
      <div class="info">
        <h3>鲜干果宅配</h3>
        <p>每日鲜  春之味</p>
        <p class="mt-15"><img width="80" height="30" src="images/btn_dinggou.png"></p>
      </div>
      <img src="images/shuiguo.jpg" class="pic"></a></li>
    <li><a target="_blank" href="">
      <div class="info">
        <h3>鲜花绿植</h3>
        <p>礼物 盆景 园艺</p>
        <p class="mt-15"><img width="80" height="30" src="images/btn_dinghua.png"></p>
      </div>
      <img src="images/xianhua.jpg" class="pic"></a></li>
    <li><a target="_blank" href="">
      <div class="info">
        <h3>洗衣管家</h3>
        <p>洗衣养护 上门取送</p>
        <p class="mt-15"><img src="images/btn_yuyue.png"></p>
      </div>
      <img src="images/xiyi.jpg" class="pic"></a></li>
    <li><a target="_blank" href="">
      <div class="info">
        <h3>居家小修</h3>
        <p>开锁换锁 疏通管道</p>
        <p class="mt-15"><img src="images/btn_yuyue.png"></p>
      </div>
      <img src="images/weixiu.jpg" class="pic"></a></li>
  </ul>
</div>

CSS代码

html,body{height:auto}
.bm_picList li,.bm_picList li img.pic,.bm_picList li a{display: block;width:295px;height:160px}
.bm_picList li{ float: left; position: relative; overflow: hidden}
.bm_picList li img.pic{  position: absolute;left:0px; top: 0px;width:305px;
-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
.bm_picList li a{ cursor: pointer}
.bm_picList li a:hover img.pic{left:-10px}
.bm_picList li .info{position: absolute;; top: 25px; left: 25px; z-index: 2}
.bm_picList li h3{ font-size:24px ; color: #000; margin-top: 0px; margin-bottom:5px; font-weight: normal}
.bm_picList li a h3{ color: #000}
.bm_picList li a p,.bm_picList li a:hover p{ color:#666}
.bm_picList li a:hover h3{ color: #000}
.bm_picList li .info p{ font-size: 14px;margin-bottom: 0px}
.bm_picList li a.c_white h3,.bm_picList li a.c_white:hover h3,.bm_picList li a.c_white p,.bm_picList li a.c_white:hover p{ color:#fff}