Css Grow on Hover 是在 div 上垂直移动文本

Question

我有一个 css 过渡，这样当有人将鼠标悬停在图像上时，h2 就会变大。它确实有点作用，但除了增加 h2 之外，它还在 div 上移动。这以前从未发生在我身上，我不明白为什么。如果您滚动到页面底部并将鼠标悬停在我们的故事和我们的团队上，您可以在此处看到它的行为：https://katherinemade.com/staging/mission-vision-values/

这是我的 html:

<div class="img-relative-position">
  <h2 class="over-image-text">Our Story</h2>
  <a href="#"> <img /> </a>
</div>

还有我的css：

.img-relative-position {
    position: relative;
}
.over-image-text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.img-relative-position h2 {
    transition: all .2s ease-in-out;
}
.img-relative-position:hover h2 {
    transform: scale(1.5);
}

有谁知道是什么导致我的 h2 在 div 上垂直移动，我如何才能保持它居中但仍然增长？

Answer 1

我认为你应该缩放一个“父”容器，所以如果你创建这样的东西

<div class="img-relative-position"> // <-- the Image
    <div class="scale-this-on-hover"> // <-- new container this one has to be scaled
      <h2 class="over-image-text">Our Story</h2>
      <a href="#"> <img /> </a>
    </div>
</div>

Answer 2

无需添加比例属性来增加文本大小

.img-relative-position:hover h2 {
    /* transform: scale(1.5); */ // Remove This Line
    font-size: 60px; // Add font-size 
}

谢谢

Answer 3

我认为您在 h2 上缺少 transform-origin: center。我为你做了一个片段。看看。

稍后谢谢我。

* {
  box-sizing: border-box;
}
.wrap {
  margin: 40px;
  width: 300px;
  height: 200px;
  line-height: 200px;
  background: green;
  color: #fff;
  text-align: center;
}
.wrap h2 {
  transition: .3s ease;
  transform-origin: center center;
}
.wrap:hover h2 {
  transform: scale(1.5);
}

<div class="wrap">

<h2>Hello Test</h2>

</div>

Answer 4

对于额外的悬停效果你可以使用这个Css我希望你喜欢它:)

.img-relative-position {
    position: relative;
    overflow: hidden;
}
.over-image-text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    transition: all 0.5s ease-in-out;
}
.img-relative-position:hover h2 {
    font-size: 60px;
}
.img-relative-position a {
    display: block;
}
.img-relative-position img {
    transition: all 0.5s ease;
}
.img-relative-position:hover img {
    transform: scale(1.2) rotate(-5deg);
}

谢谢

Answer 5

你可以这样做

.img-relative-position {
    position: relative;
}
.over-image-text {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.img-relative-position h2 {
    transition: all .2s ease-in-out;
}
.img-relative-position:hover h2 {
    transform: scale(1.5);
}

<div class="img-relative-position">
  <div class = "over-image-text"> //new div
    <h2 class="over-image-text-cstm">Our Story</h2>
  </div>
  <a href="#"> <img /> </a>
</div>

Css Grow on Hover 是在 div 上垂直移动文本

Css Grow on Hover is moving text vertically across the div

html

css

hover

css-transitions