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

【问题标题】：Css Grow on Hover is moving text vertically across the divCss Grow on Hover 是在 div 上垂直移动文本
【发布时间】：2021-06-10 08:10:32
【问题描述】：

我有一个 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 上垂直移动，以及如何保持它居中但仍然增长？

【问题讨论】：

您将在悬停时用scale(1.5) 覆盖transform 属性，这样之前应用于h2 元素的translate(-50%, -50%) 就会被删除。

标签： html css hover css-transitions

【解决方案1】：

你可以这样做

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

谢谢

【讨论】：

虽然过渡并不顺利
我又添加了一个答案请查看希望你喜欢

【解决方案4】：

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

稍后谢谢我。

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

【讨论】：

【解决方案5】：

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

谢谢

【讨论】：