<!--放大图片--> $(".list-item").hover(function(){ $(this).children(".list-scale").addClass("scaleMax") },function(){ $(this).children(".list-scale").removeClass("scaleMax") });
.bigImg-text{position:absolute; left:0;bottom: 0;display: none;background: rgba(0,0,0,0.4);width:100%; font-size: 12px;color: #fff;} .text-box{margin:10px; } .text-box p{font-size: 12px;line-height:16px;overflow: hidden;text-overflow:ellipsis; white-space: nowrap;} .text-box .pro-title{font-size: 16px;padding-bottom: 10px;font-weight: bold;} .bigImg-text img{width: 485px;height: 362px; display: block;} .list-scale{ position: absolute; top:0px; left:0px; width: 100%; height: 100%; transition: all 0.5s linear;} .scaleMax{ /*transform: scale(2.77);*/ z-index: 99;width: 485px;height: 363px; } .scaleMax .bigImg-text{ display: block !important;}
<div class="list-item fl"> <div class="list-scale"> <img src="private/img/mine/big1.jpg"> <div class="bigImg-text"> <div class="text-box"> <p class="pro-title">产品名称</p> <p>产品文字简介,产品文字简介,产品文字简介,产品文字简介,产品文字简介,产品文字简介产品文字简介</p> </div> </div> </div> </div>
![]()