Question

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

当用户将鼠标悬停在图像上时，代码的作用是，信息（关于我们的文字）也越来越大。我试图获得的是信息字体与以前保持一致，只有背景向上扩展。有没有办法实现这个目标？

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>

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

2 个答案: