如何獲得背景大小：蓋放大懸停

Question

這些都是我的代碼有：

.thumbha { 
 
    width: 350px; 
 
    height: 350px; 
 
    background-position: top center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    margin-bottom: 20px; 
 
    margin-right: 20px; 
 
    float:left; 
 
    position: relative; 
 
    z-index:1; 
 
} 
 

 
          
 
.ombra { 
 
    background-image:url(http://www.lovatotribe.com/test/wp-content/themes/ggi1/media/img/ombra.png); 
 
    width: 100%; 
 
    height:100%; 
 
    position:absolute; 
 
    top:0; 
 
    z-index: -1 
 
}

<div class="thumbha" style="background-image:url(http://www.lovatotribe.com/wp-content/uploads/2015/08/confident-shoot.jpg)"> 
 

 

 
<div class="ombra"></div> 
 
</div>

所以我想.thumbha的背景圖像，當你將鼠標懸停在放大它。我怎麼做？任何人都可以幫助我？

Answer 1

嘗試

.thumba:hover { 
-webkit-transform:scale(1.2); 
-moz-transform:scale(1.2); 
-ms-transform:scale(1.2); 
-o-transform:scale(1.2); 
transform:scale(1.2); 
} 

和動畫添加到.thumba爲平滑變焦

.thumba { 
-webkit-transition:all .3s ease-in-out; 
-moz-transition:all .3s ease-in-out; 
-ms-transition:all .3s ease-in-out; 
-o-transition:all .3s ease-in-out; 
transition:all .3s ease-in-out; 
} 

可以設置刻度的任何值，你需要

Answer 2

您必須添加一個額外的CSS元素像這個：

.thumbha:hover { 
background-size:150%; 
} 

將150％的值更改爲適合您的值。

Answer 3

.thumbha:hover { background-size: 300px 300px;} 
 
     .thumbha { 
 
      width: 350px; 
 
      height: 350px; 
 
      background-position: top center; 
 
      -webkit-background-size: cover; 
 
      -moz-background-size: cover; 
 
      -o-background-size: cover; 
 
      background-size: cover; 
 
      margin-bottom: 20px; 
 
      margin-right: 20px; 
 
      float:left; 
 
      position: relative; 
 
      z-index:1; 
 
     } 
 

 
            
 
     .ombra { 
 
      background-image:url(http://www.lovatotribe.com/test/wp-content/themes/ggi1/media/img/ombra.png); 
 
      width: 100%; 
 
      height:100%; 
 
      position:absolute; 
 
      top:0; 
 
      z-index: -1 
 
     }

<div class="thumbha" style="background-image:url(http://www.lovatotribe.com/wp-content/uploads/2015/08/confident-shoot.jpg)"> 
 

 

 
    <div class="ombra"></div> 
 
    </div>