html - 如何获取背景大小 :cover zoomed on hover

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

您必须像这样添加一个额外的 CSS 元素:

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

将 150% 的值更改为适合您的值。