ズーム背景画像は

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

はあなただけを考慮に入れ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>