悬停背景（放大），前面的文本没有放大答案

【问题标题】：Hover background (scale up) with text in front not getting scale up悬停背景（放大），前面的文本没有放大
【发布时间】：2017-09-04 11:31:42
【问题描述】：

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

这是我到目前为止所做的：

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

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

【问题讨论】：

标签： javascript jquery html css css-transforms

【解决方案1】：

因此您不想将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>

【讨论】：

【解决方案2】：

这个结果是你期望检查 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>

【讨论】：