悬停背景（放大），前面的文字没有放大

Question

当用户将鼠标悬停在图片上时，图片会变大。但我也有一些信息要显示在图像前面。

这是我目前所做的：

.home-about-link {
  overflow: hidden;
  width: 100%;
}

.home-about {
  background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  height: 300px;
  width: 100%;
  opacity: 0.8;
}

.home-about:hover {
  opacity: 1;
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')";
  /* IE8 */
  filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');
  /* IE6 and 7 */
}

h2 {
  color: #fff;
}

<div class="home-about-link">
  <div class="home-about">
    <h2>ABOUT US</h2>
  </div>
</div>

代码所做的是当用户将鼠标悬停在图像上时，信息（关于我们的文本）也会变大。我试图得到的是信息字体和以前一样，只是背景放大了。有什么办法可以实现吗？

Answer 1

这个结果是你期待的吗检查jsbin中的输出

只需减少

的值

-webkit-transform: scale(1.1)

到

-webkit-transform: scale(1);

Jsbin link

css

.home-about-link{
    overflow: hidden;
    width: 100%;
}
.home-about{
    background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-align: center;
    height: 300px;
    width: 100%;
    opacity: 0.8;
}
.home-about:hover {
    opacity: 1;
    transform: scale(1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1);<!----check the changes-------->
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1); /* IE 9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand'); /* IE6 and 7 */ 
}

h2{
  color: #fff;
 }

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
     <div class="home-about-link">
      <div class="home-about">
        <h2>ABOUT US</h2>
      </div>
    </div>

</body>
</html>

Answer 2

所以您不想 h2 与背景一起缩放。

一种方法是使用比例因子 1/1.1 = 0.909

反向缩放 h2

.home-about:hover h2{
  transform: scale(0.909);
}

让我知道您对此的反馈。干杯！

.home-about-link {
  overflow: hidden;
  width: 100%;
}
.home-about {
  background: url(https://dummyimage.com/600x400/000/fff) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  height: 300px;
  width: 100%;
  opacity: 0.8;
}
.home-about:hover {
  opacity: 1;
  transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  /* IE 9 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand')";
  /* IE8 */
  filter: progid: DXImageTransform.Microsoft.Matrix(M11=1.1, M12=0, M21=0, M22=1.1, SizingMethod='auto expand');
  /* IE6 and 7 */
}
h2 {
  color: #fff;
}
.home-about:hover h2 {
  transform: scale(0.909);
}

<div class="home-about-link">
  <div class="home-about">
    <h2>ABOUT US</h2>
  </div>
</div>

悬停背景（放大），前面的文字没有放大

Hover background (scale up) with text in front not getting scale up

html

javascript

css

jquery

css-transforms