放大的背景图像只有

Question

我想放大的背景图像只有

.prod_img:hover { 
 
    webkit-transform: scale(1.04); 
 
    -moz-transform: scale(1.04); 
 
    -o-transform: scale(1.04); 
 
    -ms-transform: scale(1.04); 
 
    transform: scale(1.04); 
 
    -webkit-transition: all 2s ease-in-out; 
 
    -moz-transition: all 2s ease-in-out; 
 
    -o-transition: all 2s ease-in-out; 
 
    -ms-transition: all 2s ease-in-out; 
 
    transition: all 2s ease-in-out; 
 
} 
 

 
.prod_img { 
 
    content: ' '; 
 
    -webkit-transition: all 2s ease-in-out; 
 
    -moz-transition: all 2s ease-in-out; 
 
    -o-transition: all 2s ease-in-out; 
 
    -ms-transition: all 2s ease-in-out; 
 
    transition: all 2s ease-in-out; 
 
    height: 580px; 
 
    width: 300px; 
 
} 
 

 
.protransparentbg { 
 
    position: absolute; 
 
    background: rgba(51, 51, 51, .8); 
 
}

<<div id="prod_main"> 
 
    <div id="product_content"> 
 

 
    <li class="prod_img prod_img1" id="prod_img1" style="background-image: url(http://images.all-free-download.com/images/graphicthumb/beautiful_landscape_picture_02_hd_pictures_166284.jpg);background-size: cover;background-position: center center;"> 
 
     <div class="protransparentbg"> 
 
     <h4 class="">FIBER FLOOR MAT</h4> 
 
     </div> 
 
    </li> 
 

 

 

 
    </div> 
 
    </div>

这是我的代码，但在这个放大效应对于背景图像并且还影响在内容image.how仅将效果赋予背景图像。

Answer 1

你必须在CSS部分改变和使用pesudo elements获得在HTML的一部分它

删除background-image和CSS使用pesudo element

.prod_img { 
 
    -webkit-transition: all 2s ease-in-out; 
 
    -moz-transition: all 2s ease-in-out; 
 
    -o-transition: all 2s ease-in-out; 
 
    -ms-transition: all 2s ease-in-out; 
 
    transition: all 2s ease-in-out; 
 
    height: 580px; 
 
    width: 300px; 
 
    position: relative; 
 
} 
 

 
.prod_img:before { 
 
    content: ' '; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url(http://images.all-free-download.com/images/graphicthumb/beautiful_landscape_picture_02_hd_pictures_166284.jpg); 
 
    background-size: cover; 
 
    background-position: center center; 
 
    " 
 

 
} 
 

 
.protransparentbg { 
 
    position: absolute; 
 
    left: 20px; 
 
    background: rgba(51, 51, 51, .8); 
 
} 
 

 
.prod_img:hover:before { 
 
    webkit-transform: scale(1.04); 
 
    -moz-transform: scale(1.04); 
 
    -o-transform: scale(1.04); 
 
    -ms-transform: scale(1.04); 
 
    transform: scale(1.04); 
 
    -webkit-transition: all 2s ease-in-out; 
 
    -moz-transition: all 2s ease-in-out; 
 
    -o-transition: all 2s ease-in-out; 
 
    -ms-transition: all 2s ease-in-out; 
 
    transition: all 2s ease-in-out; 
 
}

<div id="prod_main"> 
 
    <div id="product_content"> 
 
    <li class="prod_img prod_img1" id="prod_img1"> 
 
     <div class="protransparentbg"> 
 
     <h4 class="">FIBER FLOOR MAT</h4> 
 
     </div> 
 
    </li> 
 
    </div> 
 
</div>