京东图片视差效果

预览效果

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}

打包下载