CSS3 Scale - Prevent From Scalling Text

So im facing an issue with some code, i have quickly written a simple example to show the effect in jsfiddle: http://jsfiddle.net/0v0syunc/ What i need to do is prevent the TEXT fr

Solution 1:

Seems like you have asked the same question again. I'll rewrite the pre-existing strategy to your duplicate question:

---

The background and the text should be separated. The background can either be a pseudo-element (most semantically valid), or an empty element (e.g. <div></div>). The choice boils down to whether or not you want to support browsers that allow transitioning of pseudo elements (in the event that you want to use CSS transitions, but in your question you didn't mention it).

I'll use the pseudo-element method. The markup remains the same, but the CSS is slightly modified:

h2 {
    color: #ffffff;
}
.box {
    width: 50%;
    height: 50%;
    text-align: center;
    padding: 10px;
    position: relative;
}
.box::before {
    background-color: #000;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
}
.box:hover::before {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

<div class="box">
    <h2>TEST TEXT</h2>
</div>

Solution 2:

What you're doing seems to be a little obtuse, however given that, you need to scale your child h2 by the inverse ratio (1/1.3):

Demo Fiddle

.box:hover h2 {
  -webkit-transform: scale(0.769);
  -ms-transform: scale(0.769);
  transform: scale(0.769);
}

The issue being that the scale is being applied to the parent and all children, so you need to reverse it for the child to 'nullify' the effect.