简单的1920鼠标经过图片变换效果
<<< CSS >>>
.lww_im a {display: block;width: 100%;}
.lww_im a:hover img {top: 0px;transition: all 0.35s ease-in-out;opacity: 100;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100)}
.lww_im .imgbox img {position: relative;top: 0;transition: all 0.35s ease-in-out;opacity: 0;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
<<< HTML >>>
<div style="width:1920px;height:500px;">
<div class="sn-simple-logo" style="padding:0px;left:50%;">
<div class="sn-simple-logo" style="padding:0px;left:-960px;">
<div style="width:1920px;height:500px;background:url(http://img01.taobaocdn.com/imgextra/i1/2138614954/TB2_kmMbXXXXXXmXpXXXXXXXXXX_!!2138614954.jpg) no-repeat;float:left;">
<div class="J_TWidget" data-widget-config="{"duration":0.1,"activeTriggerCls":".tshop-pbsm-shop-nav-ch","interval":0.1,"effect":"scrollx","activeIndex":1,"navCls":"lww_nc01","contentCls":"lww_cc01","autoplay":true}" data-widget-type="Carousel" style="width:818px;height:500px;position:relative;margin:0 0 0 142px;float:left;">
<ul class="lww_cc01" style="left:0px;width:999999px;display:none;">
<li style="float:left;display:block;">
</li>
</ul>
<ul class="lww_nc01">
<li class="" style="background:no-repeat;width:auto;height:500px;visibility:visible;">
<ul>
<li style="background:no-repeat;width:auto;height:500px;visibility:visible;">
<div class="lww_im sn-simple-logo" style="width:239px;height:353px;top:62px;left:80px;margin:0px 0 0 0px;background:url(http://img02.taobaocdn.com/imgextra/i2/2138614954/TB2NOqUbXXXXXaTXXXXXXXXXXXX_!!2138614954.jpg) no-repeat;float:left;">
<a class="imgbox sn-simple-logo" style="display:block;width:818px;height:500px; top:-62px; left:-80px;overflow:hidden;" target="_blank"><img src="http://img02.taobaocdn.com/imgextra/i2/2138614954/TB20teMbXXXXXc7XXXXXXXXXXXX_!!2138614954.jpg" width="818" height="500" /></a>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="J_TWidget" data-widget-config="{"duration":0.1,"activeTriggerCls":".tshop-pbsm-shop-nav-ch","interval":0.1,"effect":"scrollx","activeIndex":1,"navCls":"lww_nc02","contentCls":"lww_cc02","autoplay":true}" data-widget-type="Carousel" style="width:818px;height:500px;position:relative;margin:0 0 0 0px;float:left;">
<ul class="lww_cc02" style="left:0px;width:999999px;display:none;">
<li style="float:left;display:block;">
</li>
</ul>
<ul class="lww_nc02">
<li class="" style="background:no-repeat;width:auto;height:500px;visibility:visible;">
<ul>
<li style="background:no-repeat;width:auto;height:500px;visibility:visible;">
<div class="lww_im sn-simple-logo" style="width:239px;height:353px;top:62px;left:80px;margin:0px 0 0 0px;background:url(http://img01.taobaocdn.com/imgextra/i1/2138614954/TB26qGLbXXXXXXZXpXXXXXXXXXX_!!2138614954.jpg) no-repeat;float:left;">
<a class="imgbox sn-simple-logo" style="display:block;width:818px;height:500px; top:-62px; left:-80px;overflow:hidden;" target="_blank"><img src="http://img02.taobaocdn.com/imgextra/i2/2138614954/TB2OsSLbXXXXXX5XpXXXXXXXXXX_!!2138614954.jpg" width="818" height="500" /></a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
页:
[1]