Css Grow on Hover is moving text vertically across the div

Question

I have a css transition so that when someone hovers over an image, the h2 will grow. It does kind of work, but the in addition to growing the h2 is also moving across the div. This has never happened to me before and I can't figure out why. You can see it's behavior here, if you scroll to the bottom of the page and hover over Our Story and Our Team: https://katherinemade.com/staging/mission-vision-values/

Here is my html:

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

And my 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);
}

Does anyone know what could be causing my h2 to move vertically across the div, and how I can keep it center but still grow?

Answer 1

i think you should scale a "parent" Container so if you create something like this

<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

You can do like this

 .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

No need To add scale property to increase text size

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

Thanks

Answer 4

I think you are missing transform-origin: center on h2. I have made a snippet for you. Have a look.

Thanks me later.

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

For Extra Hover Effect You Can use This Css I Hope You Like It:)

.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);
}

Thanks