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 prevent the TEXT from scaling but been struggling to do this, i used background-size before scale which worked fine but that's not supported in any version of IE including 10/11 - anyone have any ideas?

h2 {
  color: #ffffff;
}
.box {
  background: #000000;
  width: 50%;
  height: 50%;
  text-align: center;
  padding: 10px;
}
.box:hover {
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  transform: scale(1.3);
}

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

Could you simply do it by adjusting the padding? http://jsfiddle.net/0v0syunc/2/ — lonesomeday, Dec 10 '14 at 15:13
Thats just an example, its actually a scale effect with a background image so cannot do padding — James Brandon, Dec 10 '14 at 15:15

score 3 · Answer 1 · edited May 17 '16 at 13:07

3

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.

edited May 17 '16 at 13:07

Mosh Feu

28,354
16
88
135

answered Dec 10 '14 at 15:13

SW4

69,876
20
132
137

I have noticed 1 thing, on the .box locally i have the transition effect as well transition: all 2s ease-out 0s; which does not seem to work with changing the scale for the h2 - is this not possible? thanks for yout help – James Brandon Dec 10 '14 at 15:28

Terry · Accepted Answer · 2020-08-27T07:28:19.860

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>

CSS3 Scale - Prevent from scalling text

2 Answers2

Demo Fiddle

Linked

Related