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

Question

我有一个css转换，这样当有人悬停在图像上时，h2就会增长。它确实起到了一定的作用，但除了增长h2之外，它还跨越了div。这以前从未发生在我身上，我不知道为什么。如果你滚动到页面底部并将鼠标悬停在"我们的故事"one_answers"我们的团队"上，你可以在这里看到它的行为：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

你可以这样做

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

Answer 3

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

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

感谢

Answer 4

我认为您在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 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);
}

感谢