放大的背景圖像只有

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>