悬停背景(放大)，前面的文字没有放大

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

本文关键字：放大 文字 前面 背景 悬停      更新时间：2023-09-26

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

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

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

代码的作用是当用户将鼠标悬停在图像上时，信息(ABOUT US文本)也会变大。我想要得到的是信息字体和之前一样，只是背景放大了。有什么办法可以做到这一点吗?

所以你不想让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>

这是您期望的结果吗?检查jsbin

中的输出

只是减少

的值
-webkit-transform: scale(1.1)


-webkit-transform: scale(1);

Jsbin联系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>
相关文章：