CSS3 Scale - Prevent from scalling text

Question

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 prev

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

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

    
TEST TEXT