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

Question

我有一个 css 过渡，因此当有人将鼠标悬停在图像上时，h2 会增长。 它确实有效，但是除了增加 h2 之外，它还在 div 中移动。 这以前从未发生在我身上，我不知道为什么。 你可以在这里看到它的行为，如果你滚动到页面底部和 hover 在我们的故事和我们的团队： 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 { 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>

Answer 3

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

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

谢谢

Answer 4

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

稍后谢谢我。

 * { 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 5

对于额外的 Hover 效果，你可以使用这个 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);
}

谢谢