Question

这些是我的代码：

＆＃13;

.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
}

＆＃13;

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

＆＃13;

所以我希望.humbha的背景图像在你悬停时可以缩放。我怎么做？有人可以帮帮我吗？

Answer 1

您必须添加一个类似的额外CSS元素：

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

将150％的值更改为适合您的任何值。

Answer 2

尝试

.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 3

＆＃13;

.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
        }

＆＃13;

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

＆＃13;

如何获得背景大小：封面放大悬停

3 个答案: